# Education app UI for React Teaching and giving: courses, grading, volunteers and gifts. 9 live React screens in [Beamline](https://beamline.io/), in working order, each in nine looks. ## Screens 1. [Course builder](https://beamline.io/components/course-builder.md): 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… 2. [Program modules](https://beamline.io/components/program-modules.md): 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… 3. [Question builder](https://beamline.io/components/question-builder.md): Questions built beside their material. A reading passage (imported, with an import pending or failed said with Try again, or pasted) whose words become… 4. [Grading desk](https://beamline.io/components/grading-desk.md): 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… 5. [Course dashboard](https://beamline.io/components/course-dashboard.md): 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… 6. [Course home](https://beamline.io/components/course-home.md): 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… 7. [Volunteer rota](https://beamline.io/components/volunteer-rota.md): 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… 8. [Gift desk](https://beamline.io/components/gift-desk.md): 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… 9. [Gift batches](https://beamline.io/components/gift-batches.md): 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](https://beamline.io/components/avatar.md) (free): in 9 of these screens - [Button](https://beamline.io/components/button.md) (free): in 9 of these screens - [Empty state](https://beamline.io/components/empty-state.md) (free): in 9 of these screens - [Label](https://beamline.io/components/label.md) (free): in 9 of these screens - [Spinner](https://beamline.io/components/spinner.md) (free): in 9 of these screens - [Text morph](https://beamline.io/components/text-morph.md) (free): in 9 of these screens - [Segmented control](https://beamline.io/components/segmented-control.md) (free): in 8 of these screens - [Select](https://beamline.io/components/select.md) (free): in 8 of these screens - [Tooltip](https://beamline.io/components/tooltip.md) (free): in 8 of these screens - [Dropdown menu](https://beamline.io/components/dropdown-menu.md) (free): in 7 of these screens - [Number field](https://beamline.io/components/number-field.md) (free): in 6 of these screens - [Skeleton](https://beamline.io/components/skeleton.md) (free): in 6 of these screens - [Alert](https://beamline.io/components/alert.md) (free): in 5 of these screens - [Badge](https://beamline.io/components/badge.md) (free): in 5 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 - [Kbd](https://beamline.io/components/kbd.md) (free): in 5 of these screens - [Search field](https://beamline.io/components/search-field.md) (free): in 5 of these screens - [Slot text](https://beamline.io/components/slot-text.md) (free): in 5 of these screens - [Textarea](https://beamline.io/components/textarea.md) (free): in 5 of these screens - [Checkbox](https://beamline.io/components/checkbox.md) (free): in 4 of these screens - [Switch](https://beamline.io/components/switch.md) (free): in 4 of these screens - [Tabs](https://beamline.io/components/tabs.md) (free): in 4 of these screens - [Input](https://beamline.io/components/input.md) (free): in 3 of these screens - [Popover](https://beamline.io/components/popover.md) (free): in 3 of these screens - [Calendar](https://beamline.io/components/calendar.md) (free): in 2 of these screens - [Chip group](https://beamline.io/components/chip-group.md) (free): in 2 of these screens - [Combobox](https://beamline.io/components/combobox.md) (free): in 2 of these screens - [Copy button](https://beamline.io/components/copy-button.md) (free): in 2 of these screens - [Date picker](https://beamline.io/components/date-picker.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: [Research & design](https://beamline.io/components/apps/research-design.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).