Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Profile blocks

Pro

Therapist Booking Profile Block for Radix UI

A sample therapist profile whose booking happens in the panel: three steps for the session, the time and the confirmation, an action foot with Back and one action, and a request that stays in the page.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

Let someone book without leaving the profile, with this stepped booking panel for React with Radix UI. A compact header says it is a sample profile, and the hairline frame under it opens on the clinician: initials, name, role and place. A band holds the catalog Steps with three markers, Session, Time and Confirm, which on a phone read "Step 2 of 3" over a Progress bar. The three panes share one cell, so the panel keeps its height whichever step is open. Session offers three kinds as radio cards with their length, format and fee. Time offers five days from a typed day in a Toggle Group and the times of the chosen day in a second. Confirm has a Native Select of invented insurance plans, or out of network with a receipt, and a Data List of what is asked for. The foot, ruled by Guides, has a status line, an outline Back and a Shine Button that reads Continue and then Request session. It's built from Steps, Progress, Toggle Group, Native Select, Data List, Badge, Avatar, Button, Shine Button and Guides, with a CSS entrance only. For a therapy or health directory, a coaching marketplace or any profile that books in steps.

FAQ

Is this a real clinician?

No. The block is a sample: the clinician, the insurance plans, the copays and the fees are all invented, and the header says so. Nothing is verified, nothing is prescribed or diagnosed and nothing is booked. When you adapt it, keep that line until the data behind it is real, and keep health details out of any status line or log.

How do I fill it with my own sessions and times?

Edit the constants at the top. SESSIONS lists each kind with its length, format and fee, TIMES_BY_WEEKDAY the times offered Monday to Friday, and PLANS the insurance plans with the copay each leaves the person paying (null for out of network). AS_OF is the day the page treats as today, and the five days are the next five weekdays after it. In a real app read the times from your scheduling system for the days after the server's date.

What does Request session do?

Nothing leaves the page. On the last step it says Requested in this demo, nothing was sent, in the status line. Continue checks each step: on the time step it asks for a time first and moves focus to the times. To make it real, send the session, the day, the time and the plan to your own API in the submit handler, and show its answer in the same status line.

Does the panel change height between steps?

No. The three panes sit in one grid cell and the two that aren't open are invisible and inert, so the tallest sets the height and nothing below it moves. Moving to a step puts focus on that step's heading, so a keyboard or screen reader user starts where the content changed; on load focus stays where it was.

Is it accessible?

The steps are a labelled list with the current one marked, the session cards are a radio group, the days and times are toggle groups with names, and the status line is a polite live region present from the start. Back is marked aria-disabled rather than disabled on the first step, so the foot keeps its shape and the button keeps its place. Here the chosen day and time are checked radios.

How does it look on a phone?

The steps list gives way to "Step 2 of 3" and a thin bar, the five days stay in one row, the times wrap three across, and Back and the action share the foot's width. The foot stays pinned to the bottom of the screen while the panel scrolls, and settles at the panel's end from the medium breakpoint.

All 100 profile blocks