shadcn.io is not affiliated with official shadcn/ui
Editable Talking Points Pitch Contact Block for React
A podcast pitch built from three talking points you can edit and reorder, plus an audience size and an episode format.
Installation
Overview
A pitch for React with Base UI, for Skerrycast, a coastal interview podcast. Three talking points sit in a band. Click one to edit it, Enter saves, and Escape puts the old wording back. Up and down buttons reorder the three points. Under them, a Select asks for the audience size and a Segment Group asks for the format: interview, solo, panel or narrative. The form also asks for the show name, your name and an email. Submitting checks every field, including that each point has been saved with some text, shows each problem under its control and moves focus to the first empty one. A valid pitch turns into a confirmation in the same space, repeating the show, the format, the audience, the email and the three points in order. The page's rails and top rule come from Guides. It's built from Editable, Segment Group, Select, Field, Input, Shine Button, Button and Guides, with CSS for the header entrance and your theme's tokens for every colour. For podcasts, shows and any page where the pitch is a short ordered list.
FAQ
Where does the pitch go?
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 your own call: details holds the show, format, audience, name and email, and points holds the three lines in order. Show the confirmation when the request succeeds, and an error line in the form when it doesn't.
How does editing a point work?
Click the point. The Editable control opens an input, Enter commits the text, and Escape restores what was there before the edit. A point that is still empty fails the submit, and focus moves to that point. The three starters are harbour, boat and tide lines, so the pitch is never a blank list on arrival. Editable is the same Ark control on every base, including the move buttons' neighbours.
How does reordering work?
Each point has an up button and a down button. The first point's up button and the last point's down button are disabled. Moving a point swaps it with its neighbour. The numbers beside the points are their current place, so they follow the order.
Those buttons use onClick and disabled.
Is a format required?
Yes. Interview, Solo, Panel and Narrative start with none selected, and the submit asks you to choose one. The Segment Group is the same control on every base. The audience sizes are worded so the words come before the numbers: under 1,000, up to 10,000, up to 100,000, and over 100,000.
How is the audience select labelled?
The label above it names the control, and focus can land on it when the audience is missing.
The trigger takes the id, and the label points to it with htmlFor.
Are the email address and phone number real?
No. hello@skerrycast.example uses the .example domain, which is reserved for examples, and +1 (415) 555-0192 is in the 555-0100 to 555-0199 range set aside for fiction. Replace EMAIL, PHONE, PHONE_HREF and HOURS at the top of the file. The phone number keeps its order in a right-to-left layout.
Related
- Pro
Subscribe or Write Contact
Join and giveA card in card with a switch between two real forms, subscribe (an email and how often) and write to us (name, email and message), that never changes size and confirms in place.
- Pro
Star Rating Feedback Contact
Support and feedbackA product feedback form for a roadmap tool in a card in card: five named stars with a word that follows the choice, switch-on topic chips and a message, ending in a confirmation that lists what was chosen.
- Pro
Instrument Picker Music Contact
Visits and servicesA trial-lesson request for a music school with no frame: a band of five instrument chips, a five-star self-rating with the word beside it, an own-instrument switch and a lesson format.
- Pro
Request a Callback Contact
Calls and meetingsA callback request with a status band and a form that asks when to ring: as soon as possible, later today from a select of 15-minute times, or on a chosen day, with a time zone.
- Pro
Minimal Contact Form
Contact formsThe calmest contact form, for a mail client: a centred heading and three fields on the page column with inline validation, a message counter and a one-line thank-you.
- Pro
Pitch Strength Startup Contact
ApplicationsA startup pitch form with a live check: a one-line pitch ticks three checks as you type, beside a stage choice, a paying-customers stepper and a panel of what the fund writes at each stage.