# Research & design app UI for React Learning from users: studies, sessions, synthesis and builders. 20 live React screens in [Beamline](https://beamline.io/), in working order, each in nine looks. ## Screens 1. [Research synthesis](https://beamline.io/components/research-synthesis.md): A research study turned into evidence in one place. Transcripts: passages marked as accepted highlights or as the assistant's suggestions (dashed)… 2. [Study setup](https://beamline.io/components/study-setup.md): Set up an unmoderated test and its screener. Test: what's tested (a website, a prototype by its share link, an app by its store page), who takes it… 3. [Study flow](https://beamline.io/components/study-flow.md): A study's blocks in order, each with where people go next. A block that routes by its answer (multiple choice, scale, open question, prototype task) has… 4. [Participant review](https://beamline.io/components/participant-review.md): One participant's session, answer by answer, beside the list of everyone who took the study. The list filters (finished, left early, with a recording)… 5. [Click heatmap](https://beamline.io/components/click-heatmap.md): One screen of a usability task as it looked (your prototype's frame or a page built from your parts, scaled into a phone) with where people clicked over… 6. [Tree test](https://beamline.io/components/tree-test.md): A tree test: build a navigation tree and read where people went. Build: pages added at the top or under any page, indented under the page above or moved… 7. [Prototype task](https://beamline.io/components/prototype-task.md): A prototype task in a study. The linked prototype refreshes from the design keeping the task and paths (a start screen gone from the new version said, a… 8. [Task results](https://beamline.io/components/task-results.md): A usability task's results, from headline outcomes down to paths and screens. Outcomes (direct success, indirect success, gave up) say their share and… 9. [Matrix question](https://beamline.io/components/matrix-question.md): A matrix question and the participant's side of it, side by side. Rows (up to ten) share one set of choices (two to seven); Enter adds a row, several… 10. [Prototype review](https://beamline.io/components/prototype-review.md): Reviewing a design file's clickable prototype. Present: the board on a stage with its wireframe, the flow chosen (an unavailable one can't be), Back… 11. [Report builder](https://beamline.io/components/report-builder.md): Build a chart from your metrics without code: choose metrics, how to group them over time, an optional breakdown, filters, the range and the chart, see… 12. [Report library](https://beamline.io/components/report-library.md): A business's reports in one place. The directory: reports by topic and group with search, each with what it answers; one this person can't open says why… 13. [Review page builder](https://beamline.io/components/review-page-builder.md): Building the page reviewers use to go through records one by one. The queue of records (one with no title shows its id instead of a blank); the record as… 14. [Database builder](https://beamline.io/components/database-builder.md): What a database does for the people who use it, built in one place. Templates: starting values per property (a relation default points at an existing… 15. [Workflow builder](https://beamline.io/components/workflow-builder.md): Automation rules for a SaaS without code: a trigger, conditions built with the query builder that branch into Yes and No, actions and waits, drawn as a… 16. [Workflow library](https://beamline.io/components/workflow-library.md): The automation library: every automation as a row (what starts it, whether it's live, a draft or paused, who owns it, when it last ran, and its runs this… 17. [Drawing board](https://beamline.io/components/drawing-board.md): A whiteboard a team already knows how to use, like FigJam: tools in a floating bar at the bottom (Select V, Hand H, Sticky note S, Shape R/O/D, Connector… 18. [Model workbench](https://beamline.io/components/model-workbench.md): A CAD model's workbench around a large isometric scene of its bodies, each shaded from its material's appearance with a soft ground shadow and an axis… 19. [Component properties](https://beamline.io/components/component-properties.md): A design system component from three sides. Its variants as a matrix on two chosen properties, the others filtering it, each cell drawing the variant; a… 20. [Slot editor](https://beamline.io/components/slot-editor.md): Slots in a design system component, from making to filling. The main component's layer tree with a checkbox per layer: a nested frame converts to a slot… ## The parts they're built from - [Button](https://beamline.io/components/button.md) (free): in 20 of these screens - [Label](https://beamline.io/components/label.md) (free): in 20 of these screens - [Select](https://beamline.io/components/select.md) (free): in 20 of these screens - [Spinner](https://beamline.io/components/spinner.md) (free): in 20 of these screens - [Tooltip](https://beamline.io/components/tooltip.md) (free): in 18 of these screens - [Avatar](https://beamline.io/components/avatar.md) (free): in 17 of these screens - [Text morph](https://beamline.io/components/text-morph.md) (free): in 16 of these screens - [Segmented control](https://beamline.io/components/segmented-control.md) (free): in 15 of these screens - [Input](https://beamline.io/components/input.md) (free): in 13 of these screens - [Switch](https://beamline.io/components/switch.md) (free): in 13 of these screens - [Dropdown menu](https://beamline.io/components/dropdown-menu.md) (free): in 11 of these screens - [Number field](https://beamline.io/components/number-field.md) (free): in 9 of these screens - [Checkbox](https://beamline.io/components/checkbox.md) (free): in 8 of these screens - [Skeleton](https://beamline.io/components/skeleton.md) (free): in 8 of these screens - [Empty state](https://beamline.io/components/empty-state.md) (free): in 6 of these screens - [Bottom sheet](https://beamline.io/components/bottom-sheet.md) (free): in 5 of these screens - [Glow](https://beamline.io/components/glow.md) (free): in 5 of these screens - [Inline edit](https://beamline.io/components/inline-edit.md) (free): in 5 of these screens - [Kbd](https://beamline.io/components/kbd.md) (free): in 5 of these screens - [Popover](https://beamline.io/components/popover.md) (free): in 5 of these screens - [Radio group](https://beamline.io/components/radio-group.md) (free): in 5 of these screens - [Search field](https://beamline.io/components/search-field.md) (free): in 5 of these screens - [Tabs](https://beamline.io/components/tabs.md) (free): in 5 of these screens - [Textarea](https://beamline.io/components/textarea.md) (free): in 5 of these screens - [Badge](https://beamline.io/components/badge.md) (free): in 4 of these screens - [Calendar](https://beamline.io/components/calendar.md) (free): in 4 of these screens - [Date picker](https://beamline.io/components/date-picker.md) (free): in 4 of these screens - [Alert](https://beamline.io/components/alert.md) (free): in 3 of these screens - [Multi-select](https://beamline.io/components/multi-select.md) (free): in 3 of these screens - [Pagination](https://beamline.io/components/pagination.md) (free): in 3 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: [AI workspace](https://beamline.io/components/apps/ai-workspace.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).