shadcn.io is not affiliated with official shadcn/ui
Agenda Builder Demo Contact Block for React Aria
A demo request that builds its own agenda: four product parts as pressable choices, an ordered agenda with start minutes, a bar against the 30-minute mark and a form that checks itself and confirms in place.
Installation
Overview
A demo request section for React with React Aria, split in two behind a divider that meets the top rule with a plus. At the start: a compact header and a short form with a name, a work email, a team size in a select and the four parts of the product (Boards, Reports, Automations and API) as pressable choices, each showing its minutes. At the end: the agenda those choices build, an ordered list that starts with a short introduction, lists each part in the order the call covers them (the ones you pressed with the minute they start at, the others quiet and marked "Left out"), and closes with questions. A bar draws the minutes against a mark at 30, and a badge says "Fits in 30 minutes" or, when the parts add up to more, "Needs a 45-minute call". Submitting checks every field, shows each problem under its field, marks the control invalid and moves focus to the first one; a valid request turns into a confirmation in the same space that repeats the parts, the team size and the length of the call. It's built from Toggle Group, Select, Field, Input, Badge, Guides, Shine Button and Button, with CSS transitions for the entrances and the bar, and your theme's tokens for every colour. For software teams that offer a guided walk-through before a trial.
FAQ
Where does the form send its data?
Nowhere yet. The submit handler waits 800 milliseconds, as a stand-in for a request, then shows the confirmation. Replace that timer in submit with a call to your sales inbox or CRM: details holds the name, email and team size, and chosen holds the ids of the parts the visitor pressed. Show the confirmation when the request succeeds, and an error line in the form when it doesn't. The confirmation promises a reply, not a time; no slot is booked.
How is the agenda worked out?
MODULES lists each part with its minutes. partsOf puts the introduction (3 minutes) first, the parts you pressed in their fixed order, then the closing questions (5 minutes). rowsOf adds up the minutes before each part to get the minute it starts at, and callFor picks the shortest call length in CALLS that holds the total. All of it is plain arithmetic at module scope, so you can change the minutes, add a part or add a 60-minute call without touching the layout.
Does the agenda move the page when you press a part?
No. The agenda always lists every part, in the same six rows: a part you haven't pressed stays where it would be, quiet and marked "Left out", and lights up when you press it, so nothing is inserted or removed. The numbers and start minutes of the rows change in place. The bar's segments change width with a short transition, which is off under reduced motion, and the total and the badge change in place; the badge keeps one width for both of its sentences.
How is the team size select labelled?
The label above it names the select's button for screen readers.
The label takes an id and the Select takes aria-labelledby; the trigger takes its own id.
What if every part is turned off?
Submitting shows "Choose at least one part to see." under the choices and moves focus to the first of them. The choices are real toggle buttons that keep the pressed state in aria-pressed, so a screen reader hears each part as on or off, and arrow keys move between them where the base's toggle group supports it. The pressed ones fill with the text colour on the page colour, never the primary colour.
How does it fit on a phone?
The header, the form and the agenda stack in one column, in that order, with a hairline between them. The four parts sit one per row below 26rem and two per row above it; the name and email go one per row, and the submit button goes full width. The agenda's rows wrap their text rather than scroll, so nothing moves sideways at 320 pixels.