shadcn.io is not affiliated with official shadcn/ui
Speaker Invitation Developer Advocate Profile Block for Ark UI
A developer advocate profile with an invitation form beside her talks: press a talk to set the topic, fill the event, day, format and audience, and draft an invitation you can copy, with the missing field named.
Installation
Overview
Let an organiser invite a speaker from the page that shows her work, with this developer-advocate profile for React with Ark UI. A compact header holds the title and one sentence, and the hairline frame under it opens on the advocate: initials, name, role, place and a badge with the people her sessions reached. The main cell lists five talks and sessions as rows with the event, the kind and the people reached; pressing one makes its title the invitation's topic. The end cell is the form: a topic, an event name, a day, a format in a Native Select, the people expected and a Switch for online only, each with a problem line that is always reserved. The foot holds a polite status line beside the one Shine Button, which checks the fields, names the one that is missing and writes the invitation into a box that is always there, with a Copy draft button that really uses the clipboard. Any edit empties the draft so it never disagrees with the form. Nothing is sent. The advocate, the events and every figure are invented samples. For a speaker-booking tool, a conference page or any profile that ends in a request for her time.
FAQ
How do I fill it with my own sessions?
Edit SESSIONS (a title, an event, a kind, a year and the people reached) and PERSON. The total in the badge is the sum of the rows. The draft text is written by draftOf, a plain function of the form, so change its sentences there. FORMATS lists the options in the format menu.
What does Draft invitation check?
That the topic and the event are not empty, that a day is chosen and that at least one person is expected. The first missing field is named in the status line and the others show their own problem line under the field. Nothing is drafted until all four are in.
Why does editing a field empty the draft?
So the box never shows an invitation that no longer matches the form. After any edit the draft box goes back to its placeholder, Copy draft is unavailable and the status line says to draft it again. The box keeps its height the whole time.
What stays local in the demo, and how do I wire it for real?
The draft and the sessions are local, and Copy draft really uses the clipboard (the status line says if the browser refuses). Nothing is sent from this demo. In your own app post the form to your booking endpoint from the submit handler and show its answer in the status line.
Is it accessible, and how does it look on a phone?
Every field has a visible label, the problem lines sit under their fields, the chosen session is marked with aria-current and the words In the form, and the status line is a polite live region present from the start. On a phone the form stacks under the talks and the status and the button stay pinned to the bottom of the screen. Dates and names keep their reading order in a right-to-left page.