# Clinic app UI for React A clinic's day: the desk's diary, booking, patient records, care plans and claims. 22 live React screens in [Beamline](https://beamline.io/), in working order, each in nine looks. ## Screens 1. [Appointment book](https://beamline.io/components/appointment-book.md): The desk's day with the appointment editor beside it. The appointment being edited is a block on the day like any other, drawn in the accent while it is… 2. [Book an appointment](https://beamline.io/components/client-booking.md): A client books an appointment on the practice's own site: a service (length and price beside it), who gives it or anyone free, and where; a day with… 3. [Services and hours](https://beamline.io/components/booking-setup.md): A practice's services and the hours its practitioners can be booked, one relation seen from both ends. A service reads as values and changes on demand… 4. [Patient overview](https://beamline.io/components/patient-overview.md): One patient's record on a page. A search finds patients by name, chart number or birth date (recent patients when empty; same names told apart by birth… 5. [Patient chart](https://beamline.io/components/patient-chart.md): A clinic's chart for one client and their animals. The client's header (phone, email, contact preferences, the balance with what it means and as of when… 6. [Health questionnaire](https://beamline.io/components/health-questionnaire.md): A patient's medical history as a versioned questionnaire. Every question takes Yes, No or I don't know, and one not answered says so, never read as No; a… 7. [Case workspace](https://beamline.io/components/case-workspace.md): A patient's clinical cases and how cases work at the practice. A case shows its status, type, teeth, staff, location and start; its checklist counts… 8. [Care plan](https://beamline.io/components/care-plan.md): A client's care plan composed beside what the client will see of it. Every field says who sees it (the care team only, or the client too) and the… 9. [Treatment plan](https://beamline.io/components/treatment-plan.md): A patient's treatment plan in named phases. Each procedure shows its tooth, status and fee beside the patient's and the insurer's estimate (not known… 10. [Plan templates](https://beamline.io/components/plan-templates.md): Reusable treatment-plan templates. A template reads as words at rest and changes on demand: its name edits in place; the status its procedures start as… 11. [Plan acceptance](https://beamline.io/components/plan-acceptance.md): A treatment plan presented for acceptance, from both sides. The practice chooses the agreement (the account's default or this location's own) and how… 12. [Plan follow-up](https://beamline.io/components/plan-follow-up.md): The practice's follow-up lists, for the person who turns accepted treatment into booked chairs. Treatment plans lead with what's at stake: the value… 13. [Session notes and tasks](https://beamline.io/components/session-notes.md): A session's note beside its follow-up tasks, each task tied to the exact words it came from: choose a task and its words light in the note or the… 14. [Note templates](https://beamline.io/components/note-templates.md): A practitioner's note templates in one library with three ways in. My templates lists their own by kind, favourites first, each with when it was last… 15. [Probing chart](https://beamline.io/components/probing-chart.md): A periodontal probing chart. Six sites per tooth (three buccal, three lingual) across both arches as you face the patient, each depth in its cell and… 16. [Procedure picker](https://beamline.io/components/procedure-picker.md): Procedures, conditions and bundles put on a patient's teeth from the chair. The mode (existing, planned, completed) is chosen before adding and each… 17. [Results notebook](https://beamline.io/components/results-notebook.md): A notebook entry's structured results. The entry's text above a bounded results table with typed columns: a sample link, numbers in their unit with their… 18. [Insurance claims](https://beamline.io/components/claims-queue.md): Insurance claims as a queue: every claim at first, in the order a person works them (rejected by the clearinghouse, denied by the payer, partly paid, not… 19. [Account ledger](https://beamline.io/components/account-ledger.md): A patient's account. All transactions or the ones needing attention, each dated with its type in a word, its amount and the running balance; entries that… 20. [Dispensing](https://beamline.io/components/dispensing.md): Dispensing from the shelf by lot. A product is found with its stock and prices (consumables left out unless asked); the quantity is drawn across its… 21. [Record sharing](https://beamline.io/components/record-sharing.md): Records sent out of a clinic. Several visits' records and their documents (record, invoice, plan, lab result, image) are chosen separately, with how much… 22. [Client journal](https://beamline.io/components/client-journal.md): A client's journal from both ends. The client's side is their home, built around their day: today's goals with how many are done and a mark each, done… ## The parts they're built from - [Button](https://beamline.io/components/button.md) (free): in 22 of these screens - [Label](https://beamline.io/components/label.md) (free): in 22 of these screens - [Spinner](https://beamline.io/components/spinner.md) (free): in 22 of these screens - [Avatar](https://beamline.io/components/avatar.md) (free): in 20 of these screens - [Select](https://beamline.io/components/select.md) (free): in 20 of these screens - [Segmented control](https://beamline.io/components/segmented-control.md) (free): in 19 of these screens - [Text morph](https://beamline.io/components/text-morph.md) (free): in 19 of these screens - [Tooltip](https://beamline.io/components/tooltip.md) (free): in 19 of these screens - [Skeleton](https://beamline.io/components/skeleton.md) (free): in 17 of these screens - [Input](https://beamline.io/components/input.md) (free): in 16 of these screens - [Empty state](https://beamline.io/components/empty-state.md) (free): in 14 of these screens - [Textarea](https://beamline.io/components/textarea.md) (free): in 12 of these screens - [Alert](https://beamline.io/components/alert.md) (free): in 9 of these screens - [Checkbox](https://beamline.io/components/checkbox.md) (free): in 9 of these screens - [Dropdown menu](https://beamline.io/components/dropdown-menu.md) (free): in 9 of these screens - [Number field](https://beamline.io/components/number-field.md) (free): in 9 of these screens - [Calendar](https://beamline.io/components/calendar.md) (free): in 8 of these screens - [Switch](https://beamline.io/components/switch.md) (free): in 8 of these screens - [Bottom sheet](https://beamline.io/components/bottom-sheet.md) (free): in 7 of these screens - [Date picker](https://beamline.io/components/date-picker.md) (free): in 7 of these screens - [Inline edit](https://beamline.io/components/inline-edit.md) (free): in 5 of these screens - [Popover](https://beamline.io/components/popover.md) (free): in 5 of these screens - [Badge](https://beamline.io/components/badge.md) (free): in 4 of these screens - [Sheet](https://beamline.io/components/sheet.md) (free): in 4 of these screens - [Multi-select](https://beamline.io/components/multi-select.md) (free): in 3 of these screens - [Time picker](https://beamline.io/components/time-picker.md) (free): in 3 of these screens - [Combobox](https://beamline.io/components/combobox.md) (free): in 2 of these screens - [Radio cards](https://beamline.io/components/radio-cards.md) (free): in 2 of these screens - [Slot text](https://beamline.io/components/slot-text.md) (free): in 2 of these screens - [Toggle group](https://beamline.io/components/toggle-group.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: [Shop](https://beamline.io/components/apps/shop.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).