Research & design app UI for React
Learning from users: studies, sessions, synthesis and builders. 20 live React screens in working order, each in nine looks, installed by your coding agent.
Screens
- Research synthesis: A research study turned into evidence in one place. Transcripts: passages marked as accepted highlights or as the assistant's suggestions (dashed)…
- Study setup: 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…
- Study flow: 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…
- Participant review: 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)…
- Click heatmap: 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…
- Tree test: 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…
- Prototype task: 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…
- Task results: A usability task's results, from headline outcomes down to paths and screens. Outcomes (direct success, indirect success, gave up) say their share and…
- Matrix question: 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…
- Prototype review: 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…
- Report builder: 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…
- Report library: 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…
- Review page builder: 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…
- Database builder: 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…
- Workflow builder: 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…
- Workflow library: 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…
- Drawing board: 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…
- Model workbench: 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…
- Component properties: 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…
- Slot editor: 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 (free): in 20 of these screens
- Label (free): in 20 of these screens
- Select (free): in 20 of these screens
- Spinner (free): in 20 of these screens
- Tooltip (free): in 18 of these screens
- Avatar (free): in 17 of these screens
- Text morph (free): in 16 of these screens
- Segmented control (free): in 15 of these screens
- Input (free): in 13 of these screens
- Switch (free): in 13 of these screens
- Dropdown menu (free): in 11 of these screens
- Number field (free): in 9 of these screens
- Checkbox (free): in 8 of these screens
- Skeleton (free): in 8 of these screens
- Empty state (free): in 6 of these screens
- Bottom sheet (free): in 5 of these screens
- Glow (free): in 5 of these screens
- Inline edit (free): in 5 of these screens
- Kbd (free): in 5 of these screens
- Popover (free): in 5 of these screens
- Radio group (free): in 5 of these screens
- Search field (free): in 5 of these screens
- Tabs (free): in 5 of these screens
- Textarea (free): in 5 of these screens
- Badge (free): in 4 of these screens
- Calendar (free): in 4 of these screens
- Date picker (free): in 4 of these screens
- Alert (free): in 3 of these screens
- Multi-select (free): in 3 of these screens
- Pagination (free): in 3 of these screens
Install the parts you need in your React app as compiled packages or editable source. Get Beamline · Connect your agent
Next: AI workspace. Other apps: AI workspace · Trading · SaaS admin · Clinic · Shop · Inventory · CMS & media · Construction · Events & bookings · Salon & fitness · Hotel & restaurant · HR & payroll · Manufacturing · Government & legal · Education
Part of Beamline UI: polished, editable React components and complete screens for custom applications. Build your own style from any look; tokens, fonts, radii, motion; not only colours.