shadcn.io is not affiliated with official shadcn/ui
Immigration Guide Chat Block for React
A relocation adviser's thread with a checklist of seven documents to tick and a timeline pane that adds up the weeks as you go, labelled as an example for an invented country and not legal advice.
Installation
Overview
Show a person planning a move with an adviser, with this immigration guide chat for React with Base UI. A hairline frame with a plus mark on each corner holds a window of fixed height for Passagehill, a relocation adviser: the top bar names the adviser, Corisande Maddock, and a note under it stays in place to say that this is an example, not legal advice, and that Eskerland is an invented country whose rules and times are made up. The log holds her greeting and a checklist card of seven documents you tick, each with the weeks it would take to get. The Timeline pane at the end is derived from the ticks: documents are gathered side by side, so the slowest missing one sets the Gather step, three fixed steps follow, and the pane gives the total in weeks, a proportional bar and which document, if ticked, would save the most. The composer's Shine Button, the only colored control, sends typed questions to a script, and a Toggle Group swaps Chat and Timeline on a phone. The frame is ruled by Guides, and everything moves with CSS only. It's the starting point for a relocation service, a visa checklist or any thread whose answers change a plan.
FAQ
What stays in the page, and how do I make it real?
Everything. The adviser's replies come from a short typed script keyed on words such as "slowest", "apply" and "thanks", then one fallback per message and a last line that says it was the last sample reply. The documents, weeks and steps are typed in the file, and nothing is sent. To wire it for real, replace DOCS and FIXED with your office's processing times, save the ticks where tick runs, and append the adviser's messages to the same list as they arrive.
How is the timeline worked out?
By three small pure functions. gatherOf takes the largest weeks among the documents you have not ticked, because they can be requested side by side; the three fixed steps (Apply, Wait, Decide) add 8 weeks; totalOf adds the two. The hint under the pane names the slowest missing document and what ticking it would save, or says that another document is as slow so one tick alone changes nothing. Tick or untick anything and the pane, the bar and the status line follow at once.
Is this legal advice?
No. The note under the top bar says so on every visit, Eskerland does not exist, and every document, week and step is made up. The point of the block is the pattern: a checklist whose state drives a derived plan. Replace the data with your own rules and have them reviewed before you show real people a timeline.
Is it usable with a keyboard and a screen reader?
The log is a focusable region announced as a log, and every message starts with a hidden "Corisande Maddock, 14:05" or "You, 14:06". The checklist is a fieldset of real checkboxes with a hidden legend, the timeline is an ordered list named "Steps and their weeks", the bar is hidden because the weeks are in text, and the composer's status line, the one live region, says the new total whenever you tick something. State is never shown by color alone.
How does it look on a phone?
The pane would not fit beside the chat, so a Chat and Timeline toggle sits under the note and shows one at a time; ticking a document in Chat still updates the Timeline you switch to. The "Example only" badge drops out of the top bar, the note stays, and the composer keeps its place at the foot of the chat. The window keeps its height and only the log and the steps scroll.
Does it work in Arabic or Hebrew?
Yes. Message sides, the pane's border, the cards' offset and the send arrow all use logical properties, names and counts such as "4 of 7 ticked" sit in isolated spans so they keep their order, and the proportional bar keeps one direction on purpose because it is a scale.