# Salon & fitness app UI for React Coaching bodies: workouts, programmes, memberships and client forms. 10 live React screens in [Beamline](https://beamline.io/), in working order, each in nine looks. ## Screens 1. [Workout planner](https://beamline.io/components/workout-planner.md): A training plan a person lives in: the program's next session with its estimate and Start, an exercise replaced for this session only or for every later… 2. [Workout logger](https://beamline.io/components/workout-logger.md): A live training session: every exercise's sets as target-table rows with a done column; marking a set done fills its shape and starts the rest by itself… 3. [Training progress](https://beamline.io/components/training-progress.md): A person's training history: the headline counts (weeks in a row, days since the last workout, workouts this month), a month calendar that names each… 4. [Program setup](https://beamline.io/components/program-setup.md): A training program's setup and living settings: the intake (one question per step, the week drawn as you answer, a failed generation keeping every… 5. [Protocol builder](https://beamline.io/components/protocol-builder.md): A practitioner's reusable protocol and the client copies made from it. Foods and habits each carry a written intent (Include, Reduce, Exclude) in its… 6. [Nutrition library](https://beamline.io/components/nutrition-library.md): A nutrition practice's library. Recipes: ingredients with grams and servings, nutrients per serving summed (energy, protein, carbohydrate, fat, fibre), a… 7. [Packages & memberships](https://beamline.io/components/packages-memberships.md): Prepaid packages and series, built: the packages down the side (version and how many sold, or not on sale yet), the open one beside them. Its price is a… 8. [Client forms](https://beamline.io/components/client-forms.md): A salon's or spa's client forms and who they ask: the forms down the side with where each stands (on, set up and off, not set up yet), the open one… 9. [Instructor finder](https://beamline.io/components/instructor-finder.md): Finding a flight instructor. Search by name or airfield, filter by what you want to learn (each subject with how many teach it nearby), by distance, and… 10. [Flight logbook](https://beamline.io/components/flight-logbook.md): A pilot's logbook. Total time (with hours brought forward from earlier logbooks), PIC, night, the last 90 days and how many entries are still incomplete… ## The parts they're built from - [Avatar](https://beamline.io/components/avatar.md) (free): in 10 of these screens - [Button](https://beamline.io/components/button.md) (free): in 10 of these screens - [Label](https://beamline.io/components/label.md) (free): in 10 of these screens - [Spinner](https://beamline.io/components/spinner.md) (free): in 10 of these screens - [Tooltip](https://beamline.io/components/tooltip.md) (free): in 10 of these screens - [Select](https://beamline.io/components/select.md) (free): in 9 of these screens - [Number field](https://beamline.io/components/number-field.md) (free): in 8 of these screens - [Segmented control](https://beamline.io/components/segmented-control.md) (free): in 7 of these screens - [Text morph](https://beamline.io/components/text-morph.md) (free): in 7 of these screens - [Bottom sheet](https://beamline.io/components/bottom-sheet.md) (free): in 6 of these screens - [Dropdown menu](https://beamline.io/components/dropdown-menu.md) (free): in 6 of these screens - [Input](https://beamline.io/components/input.md) (free): in 6 of these screens - [Textarea](https://beamline.io/components/textarea.md) (free): in 6 of these screens - [Chip group](https://beamline.io/components/chip-group.md) (free): in 5 of these screens - [Empty state](https://beamline.io/components/empty-state.md) (free): in 5 of these screens - [Skeleton](https://beamline.io/components/skeleton.md) (free): in 5 of these screens - [Switch](https://beamline.io/components/switch.md) (free): in 5 of these screens - [Alert](https://beamline.io/components/alert.md) (free): in 4 of these screens - [Calendar](https://beamline.io/components/calendar.md) (free): in 4 of these screens - [Checkbox](https://beamline.io/components/checkbox.md) (free): in 4 of these screens - [Date picker](https://beamline.io/components/date-picker.md) (free): in 4 of these screens - [Glow](https://beamline.io/components/glow.md) (free): in 4 of these screens - [Kbd](https://beamline.io/components/kbd.md) (free): in 4 of these screens - [Search field](https://beamline.io/components/search-field.md) (free): in 4 of these screens - [Sheet](https://beamline.io/components/sheet.md) (free): in 4 of these screens - [Target table](https://beamline.io/components/target-table.md): in 4 of these screens - [Badge](https://beamline.io/components/badge.md) (free): in 3 of these screens - [Combobox](https://beamline.io/components/combobox.md) (free): in 3 of these screens - [Confirm morph](https://beamline.io/components/confirm-morph.md): in 3 of these screens - [Inline edit](https://beamline.io/components/inline-edit.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: [Hotel & restaurant](https://beamline.io/components/apps/hotel-restaurant.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).