shadcn.io is not affiliated with official shadcn/ui
Intent Router Nonprofit Contact Block for Ark UI
An "I want to" router for a charity: four radio tiles (donate, volunteer, partner, fundraise), and one form whose first fields change with the choice while the panel keeps its height.
Installation
Overview
A contact section for React with Ark UI that routes a visitor by what they want to do. A compact header opens on a band of four tiles on shared hairlines that run from rail to rail, a 2x2 on a phone: Donate, Volunteer, Partner and Fundraise, each a radio with its own icon, a name and (from sm) a line. The chosen tile gets a foreground ring and a filled radio. Under it a tinted panel holds one form. Its first fields belong to the choice: an amount and a fund, hours a month and an area, an organisation and an idea, a goal and a plan; name and email are shared. The four sets sit in one grid cell, the unused ones hidden and inert, so the panel is as tall as the tallest and never jumps when you switch. The form checks only the chosen set on submit, shows each problem under its field, marks the control invalid and moves focus to the first one; a valid note turns into a confirmation that says what was asked, in the same space, with the tiles locked until you send another. It's built from Radio Group, Field, Number Input, Select, Input, Textarea, Guides, Shine Button and Button, with CSS transitions for the entrances and your theme's tokens for every colour. For charities and clubs that get four kinds of enquiry in one inbox.
FAQ
How do I add a fifth way to help?
Add an entry to INTENTS (its icon, name, line, heading, button and the names of its first fields), add a field set for it in the grid cell next to the other four (give it PANE, the hidden(...) helper and inert like them), and a problems function that checks its fields. Grid columns on the tile band are four from lg: change lg:grid-cols-4 if you have another number.
Why do the other sets leave space under them?
All four sets live in one grid cell so the panel keeps its height when you switch tiles, and the cell is as tall as the tallest set (Partner, with its idea box). The hidden sets are invisible and inert, so they can't take focus or be read out. If your sets are of very different heights, trim the tallest or accept the gap.
What happens to a problem when I change my mind?
Choosing another tile clears the problems shown, because they belonged to the set that just left. Submit checks the chosen set and the shared fields, in the order you see them, and moves focus to the first one that fails.
How does a screen reader follow the switch?
The tiles are a radio group named "I want to", each tile the label of its own radio. The form's heading changes with the choice ("Your gift", "Your time"…) and is a polite live region, and it names the form. The hidden sets are inert, so only the visible one is read.
Where does it send the note?
Nowhere yet. The submit handler waits 800 milliseconds, then shows the confirmation, which says what the visitor asked for ("your 4 hours a month with welcome desk"). Replace the timer in submit with a call that routes details by choice: gifts to finance, hours to your volunteer desk.