# SaaS admin app UI for React Running a SaaS product: dashboards, customers, billing, support and settings. 87 live React screens in [Beamline](https://beamline.io/), in working order, each in nine looks. ## Screens 1. [Analytics dashboard](https://beamline.io/components/analytics-dashboard.md): A SaaS overview in the app shell, fed by your metrics hook: range and segment filters drive KPIs, new and expansion revenue, channels, plan mix, uptime… 2. [Sales dashboard](https://beamline.io/components/sales-dashboard.md): A sales leader's week in one screen: closed won against quota and pace, pipeline coverage and win rate, the quarter's run toward target with the forecast… 3. [Product analytics](https://beamline.io/components/product-analytics.md): How people use the product: a funnel whose steps are the selector, where the people lost at a step went (saved as a cohort in one action), retention by… 4. [Retention analysis](https://beamline.io/components/retention-analysis.md): Retention as a question with its terms in view: people who did one event came back to do another, on exactly day N or on or after it, with days as… 5. [Session replay](https://beamline.io/components/session-replay.md): Session replay with its triage. Recordings are filtered by conditions (has errors, address contains, longer than) and saved filters shared with the team… 6. [Status dashboard](https://beamline.io/components/status-dashboard.md): An operations view of service health: the overall state in one line, every service with its status, uptime, latency now and 90 days of history, latency… 7. [Telemetry explorer](https://beamline.io/components/telemetry-explorer.md): Logs and the traces behind them. A stacked volume chart shows how many lines of each level arrived over the time in view, so a burst of errors reads at a… 8. [Dashboard panels](https://beamline.io/components/dashboard-panels.md): A dashboard of panels configured without code. Panels in a grid sized small, medium or large, each showing what it computes now: a number (coloured only… 9. [Dashboard controls](https://beamline.io/components/dashboard-controls.md): A dashboard's controls and the panels they drive. Variables, ad hoc filters (added from a key and a value, each removable), group by and the time range… 10. [Versioned dashboard](https://beamline.io/components/versioned-dashboard.md): A dashboard over a data source that has versions (a design model, a dataset, a release). The pinned source and version are named once in the header; each… 11. [Saved views](https://beamline.io/components/saved-views.md): Saved viewpoints of a model, grouped for review. Privacy (only you, or everyone on the project) and the group are words on every row; copying a link says… 12. [Query library](https://beamline.io/components/query-library.md): The team's saved queries, to reuse in the editor. The list is a rail: all or starred and a search at rest; author, source, tags (a query with any chosen… 13. [CRM pipeline](https://beamline.io/components/crm.md): A pipeline screen: KPIs and stage mix derived from a virtualised deals grid with inline edit, bulk moves and delete with undo; a row opens the deal in a… 14. [Pipeline views](https://beamline.io/components/pipeline-views.md): One dataset of deals seen through named views: a board by stage where each card's time in its stage is drawn against the stage's target and said past it… 15. [Pipeline record](https://beamline.io/components/pipeline-record.md): One piece of work for a contact, through its stages. The contact's records sit as tabs, each with its own stage and history. The record leads: its title… 16. [Contact profile](https://beamline.io/components/contact-profile.md): One customer on one page: who they are and how to reach them (fields edit in place), their lifecycle stage and owner, the deals they are in with what is… 17. [Customer requests](https://beamline.io/components/customer-requests.md): What customers asked for, linked to the work that answers it. By work item: each item with its status, how many requests it carries and how many of them… 18. [Helpdesk inbox](https://beamline.io/components/helpdesk-inbox.md): A support team's inbox: views with counts, a virtualised ticket queue with search, priority filters and live SLA clocks, and the open ticket with its… 19. [Shared inbox](https://beamline.io/components/shared-inbox.md): A team's inboxes where each status tab means the right thing for its place, and a rule that mirrors teammates' conversations into a shared inbox. Your… 20. [Intake triage](https://beamline.io/components/intake-triage.md): Incoming requests decided before work starts, and the rules that route them. Triage: the items waiting (key, title, reporter and source, label in its… 21. [Queue today](https://beamline.io/components/queue-today.md): A walk-in queue's day so far. Every number says its window (since opening), what it's out of, and when it was last refreshed; served carries its share of… 22. [Queue settings](https://beamline.io/components/queue-settings.md): A walk-in queue's settings, one tab per job. Bookings: adding booked visits to the queue as one sentence with its consequence and an example, a conflict… 23. [AI support chat](https://beamline.io/components/support-chat.md): The customer's side of AI support: an assistant that answers from your help centre with numbered citations, a thumbs up or down on every answer (a down… 24. [AI support console](https://beamline.io/components/support-console.md): The support team's side of AI support: a queue sorted by what is due first (who the assistant is still handling, who asked for a person, who waits), the… 25. [Team chat](https://beamline.io/components/team-chat.md): A team's messages in one screen: channels and direct messages with unread counts and mentions, who is online, the conversation with reactions, receipts… 26. [Meeting and call review](https://beamline.io/components/meeting-review.md): Everything a recorded call left behind on one screen: the recording with its transcript by speaker, an AI summary that streams in, action items with… 27. [Email automation](https://beamline.io/components/email-automation.md): An email automation seen three ways. Runs: each with how it ended (running, finished, failed, cancelled: four words, four marks) and filters with counts… 28. [Messaging journeys](https://beamline.io/components/messaging-journeys.md): One messaging automation from the inside: its steps in order on a spine with the team's notes travelling beside a step (never steps; orphaned and said… 29. [Notification preferences](https://beamline.io/components/notification-preferences.md) (free): What reaches a person and where: events grouped by area down the side, channels (email, push, Slack, in-app) across the top, a switch per pair that saves… 30. [Changelog feed](https://beamline.io/components/changelog-feed.md): An in-app What's new page: release notes grouped by month with tags, versions, pictures and details, a tag filter with counts, entries since your last… 31. [Billing & invoices](https://beamline.io/components/billing.md): The billing page of a subscription: the plan with its seats and renewal, cancel and resume in place, the card on file with a checked update form, metered… 32. [Invoices](https://beamline.io/components/invoices.md): Accounts receivable in one screen: what is outstanding, overdue and paid, the invoices by status in a virtualised grid with bulk reminders, and each… 33. [Billing desk](https://beamline.io/components/billing-desk.md): A front desk's billing for one client with several animals. A hospital stay's daily sales are gathered into one invoice: open sales on a rail (chosen… 34. [Accounting workbench](https://beamline.io/components/accounting-workbench.md): Card transactions on their way to the books: Prepare, Review and Exported as stages with exception views that keep missing coding apart from missing… 35. [Reconciliation](https://beamline.io/components/reconciliation.md): Balances compared and statements checked: each bank account's statement balance beside the books', both dated and drawn on one scale, the difference said… 36. [Transaction review](https://beamline.io/components/transaction-review.md): New transactions made sense of, and the rules that do it next time. Review takes one card at a time as the screen's focal object: the merchant, the… 37. [Budget month](https://beamline.io/components/budget-month.md): A household's month budget, worked on. The month leads with what is left to budget, in large figures, beside income and spending as bars (spending read… 38. [Estimate share](https://beamline.io/components/estimate-share.md): Sending an estimate to the people who decide. Recipients from the customer's and the fleet's contacts, each by email and text (an address missing said on… 39. [Order closeout](https://beamline.io/components/order-closeout.md): Closing a repair order into an invoice. Its gates, each passed (success) or open (warning) with what to do: the balance paid (a payment recorded in… 40. [Purchase request](https://beamline.io/components/purchase-request.md): A purchase request, reviewed by the people who approve it. What is asked for: how often and for which dates, lines with quantity, rate and amount, each… 41. [Purchasing rules](https://beamline.io/components/purchasing-rules.md): A company's purchasing rules in one place. Approval exceptions (fallback review over an amount, over-budget routing, recurring documents approved once… 42. [Approval policy](https://beamline.io/components/approval-policy.md): A payment approval policy, edited as amount bands. Each band covers payments from one amount up to (not including) another, with its approvers in order… 43. [Projects](https://beamline.io/components/projects.md): A team's projects: the portfolio by health (on track, at risk, off track) with progress, lead, team and due date, filtered and searched; a project opens… 44. [Project home](https://beamline.io/components/project-home.md): A project's home joining model activity, delivery through the stages, syncs with connected tools and the project's details. Each section says its own… 45. [Project browser](https://beamline.io/components/project-browser.md): Projects from this computer, a phone library and a paired device, with their tracks and dated backups. A phone library prints its direction ("from your… 46. [Project directory](https://beamline.io/components/project-directory.md): A workspace's projects in a table: your role, who can open each one (its own column, with an icon and words), labels, status and when it changed. Labels… 47. [Project signals](https://beamline.io/components/project-signals.md): Projects with their signals apart: the health each lead wrote and how fresh that update is, drawn as the time since it against when the next was expected… 48. [Issue workbench](https://beamline.io/components/issue-workbench.md): One error issue under investigation: its all-time events and users labelled apart from what the environment and range filters scope, drawn per day with… 49. [Tracker desk](https://beamline.io/components/tracker-desk.md): A product team's work tracker from one person's seat. The inbox: Priority and Other with unread counts, notifications moved through with J/K or arrows… 50. [Engineering changes](https://beamline.io/components/engineering-changes.md): Engineering changes to a product: a draft revision edited beside the revision production uses, which doesn't change until the change is applied, with the… 51. [Workflow versions](https://beamline.io/components/workflow-versions.md): A workflow's versions with three questions answered apart: which version you're viewing, which draft you're editing and which one is running, as three… 52. [External review](https://beamline.io/components/external-review.md): A document reviewed with someone outside the team. Who holds the pen is one line at the top. Comments are kept in two threads by audience, the audience… 53. [Event evidence](https://beamline.io/components/event-evidence.md): What surrounded one error event, beside the issue: the feature flags evaluated before it, error volume per hour with flag changes marked (a change after… 54. [Correlation editor](https://beamline.io/components/correlation-editor.md): Building a link from a query's results to another source. In editor mode the results are outlined and every cell can start a link; the chosen row's… 55. [File manager](https://beamline.io/components/file-manager.md): Files and folders in one screen: the views (My files, Shared, Recent, Starred, Trash) with storage at the foot, a folder tree beside the files… 56. [Slide presenter](https://beamline.io/components/slide-presenter.md): A deck being presented, edited or watched. The slides in a numbered strip (a live slide marked by its kind, notes by a dot), the slide on stage with its… 57. [Signature fields](https://beamline.io/components/signature-fields.md): Preparing a document for signing: place signature, initials, date, text and checkbox fields on its pages for named signers. Choose a signer, then a field… 58. [Record catalogue](https://beamline.io/components/record-catalog.md): A catalogue of records kept by a small team. The list: search, a category multi-select and a status filter together, the count shown against the whole… 59. [Record editor](https://beamline.io/components/record-editor.md): A record list and the editor for one record, guarding unsaved changes. Changed fields are marked and counted; Cancel, Escape or choosing another record… 60. [Record import](https://beamline.io/components/record-import.md): One file into two linked record types (people and their companies). Map: each column beside its example values imports into a field of either type or… 61. [Import runs](https://beamline.io/components/import-runs.md): Imports you can leave and come back to. The runs listed with their state on a tinted chip; one opened shows its file, record type, job and who started… 62. [Record settings](https://beamline.io/components/record-settings.md): How records are judged and signed. Flags show how many records carry each beside its switch: switching one off keeps past uses readable, delete is… 63. [Record setup](https://beamline.io/components/record-setup.md): How one kind of record is set up: its page layout edited on a real record as people will see it (a field's eye hides or shows it, required ones locked… 64. [Event registration](https://beamline.io/components/event-registration.md): An event's page with its registration and ticket. The event: artwork, host, title, the date and times in the event's own time zone (named beside them)… 65. [Ticket setup](https://beamline.io/components/ticket-setup.md): A seated event's tickets, led by what each type sells against its seats: per type its capacity as a figure against the seats mapped to it, a bar of sold… 66. [Lease setup](https://beamline.io/components/lease-setup.md): A new lease, set up on a unit in four steps. The term is drawn on the unit's occupancy beside the leases already on it, and its start and end are grips… 67. [Rental policy](https://beamline.io/components/rental-policy.md): A rental shop's period policy: any dates (with or without pickup and return times), fixed lengths or time slots, each with its own settings (default… 68. [Planner setup](https://beamline.io/components/planner-setup.md): A planner's settings that are easy to get wrong. Calendar events: turning them on is a choice, not a connection, so the card says where it really is… 69. [Stop runs](https://beamline.io/components/stop-runs.md): Stopping an automation as two commands that say what they do. Stop new runs takes no new ones while the runs already going carry on, the count falling as… 70. [Map annotations](https://beamline.io/components/map-annotations.md): Notes drawn on a chart over the real ground (a map base: coast, water, relief, towns, roads), the chart as large as the window allows. Lines, areas and… 71. [Flight record](https://beamline.io/components/flight-record.md): One recorded flight: its out, in, time and distance in the head, taken from the linked tracks; the tracks recorded around it drawn on the real ground (a… 72. [Flight route](https://beamline.io/components/flight-route.md): A route in the air, drawn on the real ground (a map base) as straight legs between waypoints, the chart as large as the window allows: the flown legs… 73. [Pre-flight briefing](https://beamline.io/components/preflight-briefing.md): A pilot's briefing before departure. Notices filtered by place and by whether they matter to this flight, each with its code, place, period (active now… 74. [Sign in](https://beamline.io/components/sign-in.md) (free): The sign-in card: email and password, a one-time code or a magic link, passkeys and single sign-on, with validation, progress, errors and a signed-in… 75. [Sign up form](https://beamline.io/components/signup-form.md) (free): The account creation card: single sign-on, name, work email and a password with strength and Caps Lock hints, terms consent, inline validation, your… 76. [Auth page](https://beamline.io/components/auth.md): The whole sign-in / sign-up route: product mark, a quiet dotted field with a light that follows the mouse, an optional notice, the SignIn and SignupForm… 77. [Onboarding checklist](https://beamline.io/components/onboarding-checklist.md): The first screen after sign-up: a welcome with how far set-up has come, a checklist of the few steps that make the product useful (each with why, how… 78. [Workspace switcher](https://beamline.io/components/workspace-switcher.md): Moving between workspaces and making a new one: a switcher for the top of your sidebar (the current workspace's mark, name and plan; a searchable list… 79. [Empty states](https://beamline.io/components/empty-states.md): The five empty moments every product has, written and wired: first use with a first step, no results with the filters to clear, an error with retry and a… 80. [Settings](https://beamline.io/components/settings.md) (free): Profile and workspace settings with one draft and a real save handler, on grouped panels: photo upload, time zone with the local time, appearance cards… 81. [Admin users](https://beamline.io/components/admin-users.md): Your staff's view of every account: headline counts that follow the filters, a virtualised users table with search, status and plan filters and sorting… 82. [Roles & permissions](https://beamline.io/components/roles-permissions.md): What each role may do, as one matrix: permissions grouped by area down the side, roles across the top with their head counts, a check per cell; a group's… 83. [Security](https://beamline.io/components/account-security.md): A person's account security on one page: how protected they are at a glance with the next step to take, password change with strength and rules, two-step… 84. [API keys & webhooks](https://beamline.io/components/api-keys.md): The developer page of a SaaS: API keys with environment, scopes, last use and expiry, created through a form whose secret is shown once (copy it before… 85. [Integrations](https://beamline.io/components/integrations.md): A directory of the apps a product connects to: search and categories with counts, connected apps first with their state (Connected, Needs attention), a… 86. [Domain verification](https://beamline.io/components/domain-verification.md): Setting up a sending domain: the DNS records exactly as the provider gives them (type, name, value, priority, TTL), each with its own state and its name… 87. [Audit log](https://beamline.io/components/audit-log.md): Who did what, to what, when and from where, for a whole workspace: newest first and grouped by day, people with avatars and keys or systems with toned… ## The parts they're built from - [Button](https://beamline.io/components/button.md) (free): in 86 of these screens - [Spinner](https://beamline.io/components/spinner.md) (free): in 86 of these screens - [Label](https://beamline.io/components/label.md) (free): in 81 of these screens - [Avatar](https://beamline.io/components/avatar.md) (free): in 76 of these screens - [Select](https://beamline.io/components/select.md) (free): in 70 of these screens - [Tooltip](https://beamline.io/components/tooltip.md) (free): in 67 of these screens - [Dropdown menu](https://beamline.io/components/dropdown-menu.md) (free): in 55 of these screens - [Segmented control](https://beamline.io/components/segmented-control.md) (free): in 49 of these screens - [Text morph](https://beamline.io/components/text-morph.md) (free): in 49 of these screens - [Skeleton](https://beamline.io/components/skeleton.md) (free): in 48 of these screens - [Empty state](https://beamline.io/components/empty-state.md) (free): in 47 of these screens - [Checkbox](https://beamline.io/components/checkbox.md) (free): in 42 of these screens - [Kbd](https://beamline.io/components/kbd.md) (free): in 38 of these screens - [Glow](https://beamline.io/components/glow.md) (free): in 36 of these screens - [Input](https://beamline.io/components/input.md) (free): in 36 of these screens - [Search field](https://beamline.io/components/search-field.md) (free): in 36 of these screens - [Badge](https://beamline.io/components/badge.md) (free): in 35 of these screens - [Chip group](https://beamline.io/components/chip-group.md) (free): in 31 of these screens - [Switch](https://beamline.io/components/switch.md) (free): in 30 of these screens - [Pagination](https://beamline.io/components/pagination.md) (free): in 28 of these screens - [Alert](https://beamline.io/components/alert.md) (free): in 24 of these screens - [Slot text](https://beamline.io/components/slot-text.md) (free): in 24 of these screens - [Table](https://beamline.io/components/table.md) (free): in 19 of these screens - [Textarea](https://beamline.io/components/textarea.md) (free): in 18 of these screens - [Bottom sheet](https://beamline.io/components/bottom-sheet.md) (free): in 17 of these screens - [Number field](https://beamline.io/components/number-field.md) (free): in 17 of these screens - [Sheet](https://beamline.io/components/sheet.md) (free): in 17 of these screens - [Copy button](https://beamline.io/components/copy-button.md) (free): in 16 of these screens - [Popover](https://beamline.io/components/popover.md) (free): in 14 of these screens - [Tabs](https://beamline.io/components/tabs.md) (free): in 14 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: [Clinic](https://beamline.io/components/apps/clinic.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).