shadcn.io is not affiliated with official shadcn/ui
Coverage Timeline Contact Block for React Aria
A photography coverage planner on a card in card: a shoot type, a start time and a length slider that draw a bar on a 6 am to 10 pm timeline with a hatched golden hour, and a form that confirms in place.
Installation
Overview
A coverage planner section for React with React Aria, drawn on a card in card that follows your theme: a tinted shell with + marks on its corners and a raised panel inside it. At the start of the panel, a shoot type as a segmented control, a start time in a Select and a length in hours on a Slider (2 to 8). At the end, a drawn timeline of the day, 6 am to 10 pm: the coverage as a solid bar that slides as you change the controls, a hatched span for the golden hour, and the coverage in words ("Coverage 3:00 to 7:00 pm") with how much of the golden hour it reaches. Shoots finish by 10 pm, so a later start shortens the longest length the slider allows. A name and an email follow. Submitting checks them, 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 shoot and the coverage, takes focus, and offers "Plan another shoot". It's built from Segment Group, Select, Slider, Field, Input, Guides, Shine Button and Button, with CSS transitions for the entrances and the bar, and your theme's tokens for every colour. For photographers, videographers, studios and any service sold by the hour.
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 studio inbox or booking tool: shoot, start, hours, name and email hold what the visitor chose. Show the confirmation when the request succeeds, and an error line in the form when it doesn't.
How is the timeline drawn, and is it accessible?
It's plain markup: a track, a bar and a hatched span positioned by percentages of the 6 am to 10 pm day (percentOf), with the hour labels under it. The drawing is one image to a screen reader, named with the coverage and the golden-hour note, and the same words appear as a polite status line beside it, so a screen reader user hears the coverage change as they move the slider. It keeps left-to-right order in a right-to-left layout, because time runs one way on a clock.
Is the golden hour real?
It's an example: GOLDEN_START and GOLDEN_END fix it at 6:00 to 7:30 pm, and the page says so beside the drawing. The real golden hour moves with the season and the place. In production, compute it for the shoot's date and location and pass it in, or remove the hatching.
Why does the slider's maximum change?
Coverage must finish by 10 pm. maxHoursFrom allows at most 8 hours and no more than the day has left after the start, so a 5:00 pm start allows 5 hours. Choosing a later start shortens a length that no longer fits, and the slider reads its value in words ("4 hours") for screen readers.
How do the slider and select differ between libraries?
The label takes an id and the Select takes aria-labelledby; the Slider takes its name from its own aria-label.
How does it fit on a phone?
Below lg everything stacks inside the panel: the controls, then the timeline, then the name and email. The timeline's five hour labels fit a 320 pixel phone, the segmented control wraps if it must, and the submit button goes full width, so nothing scrolls sideways. The bar slides with a short transition, and not at all with reduced motion.