Education app UI for React
Teaching and giving: courses, grading, volunteers and gifts. 9 live React screens in working order, each in nine looks, installed by your coding agent.
Screens
- Course builder: Setting a course up. The learning path as ordered sets, each with its release rule in place (at once, a delay after the set before drawn as a bar you…
- Program modules: A wellness or coaching program's modules as a practitioner builds them. The modules down the side with where each stands (draft, published at a revision…
- Question builder: Questions built beside their material. A reading passage (imported, with an import pending or failed said with Try again, or pasted) whose words become…
- Grading desk: Grading a quiz or an assignment. The submissions down the side, not graded first, the open one beside its grade. A quiz attempt shows each question's…
- Course dashboard: A course's staff view: its identity (draft or published, who may join, how it runs, its lessons) with Publish through your app, Preview as a learner and…
- Course home: A learner's course, week by week, in the cohort's time zone: each lesson done or not, a project's draft or submission, a reflection answered or not, a…
- Volunteer rota: Several plans side by side for the people who staff them: plans as columns, teams and their positions as rows, each cell the people scheduled with their…
- Gift desk: A gift or tickets taken in person, on a phone at an event or at a desk: the gift entered large in its currency, once or monthly (monthly said as an…
- Gift batches: Gift batches between counting and the books: batches a counting team enters, each with the day the gifts were received (apart from when they were entered…
The parts they're built from
- Avatar (free): in 9 of these screens
- Button (free): in 9 of these screens
- Empty state (free): in 9 of these screens
- Label (free): in 9 of these screens
- Spinner (free): in 9 of these screens
- Text morph (free): in 9 of these screens
- Segmented control (free): in 8 of these screens
- Select (free): in 8 of these screens
- Tooltip (free): in 8 of these screens
- Dropdown menu (free): in 7 of these screens
- Number field (free): in 6 of these screens
- Skeleton (free): in 6 of these screens
- Alert (free): in 5 of these screens
- Badge (free): in 5 of these screens
- Bottom sheet (free): in 5 of these screens
- Glow (free): in 5 of these screens
- Kbd (free): in 5 of these screens
- Search field (free): in 5 of these screens
- Slot text (free): in 5 of these screens
- Textarea (free): in 5 of these screens
- Checkbox (free): in 4 of these screens
- Switch (free): in 4 of these screens
- Tabs (free): in 4 of these screens
- Input (free): in 3 of these screens
- Popover (free): in 3 of these screens
- Calendar (free): in 2 of these screens
- Chip group (free): in 2 of these screens
- Combobox (free): in 2 of these screens
- Copy button (free): in 2 of these screens
- Date picker (free): in 2 of these screens
Install the parts you need in your React app as compiled packages or editable source. Get Beamline · Connect your agent
Next: Research & design. Other apps: AI workspace · Trading · SaaS admin · Clinic · Shop · Inventory · CMS & media · Construction · Events & bookings · Salon & fitness · Hotel & restaurant · HR & payroll · Manufacturing · Government & legal · Research & design
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.