shadcn.io is not affiliated with official shadcn/ui
Pitch Strength Startup Contact Block for React
A 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.
Installation
Overview
A startup pitch section for React with Base UI, laid out as three cells set apart, each with its own lines and + marks on its start corners, under a start-aligned header. The first cell is the pitch itself, one line with a counter. The second is the live panel: three checks tick as you type (it says who it is for, it includes a number, it fits in 120 characters), a three-segment meter fills with them, and a short list shows what the fund typically writes at each stage, with yours marked and the whole list labelled "Example figures only, not advice". The third cell holds the stage as a row of three choices, paying customers in a stepper, a name and an email. On a phone the checks sit right under the pitch. Submitting checks every field, shows each problem under its field, marks the control invalid and moves focus to the first one; a valid pitch turns into a confirmation in the same space that quotes the pitch back and says how many checks it met. It's built from Segment Group, Number Input, Input, Field, Badge, Guides, Shine Button and Button, with CSS transitions for the entrances and the meter, and your theme's tokens for every colour. For funds, accelerators and angel groups that read pitches by form.
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 deal-flow inbox or CRM: details holds the pitch, stage, paying customers, name and email. Show the confirmation when the request succeeds, and an error line in the form when it doesn't.
How are the three checks decided?
checksOf runs plain tests at module scope on the trimmed pitch. "Says who it is for" looks for a word like for, helps, lets or serves followed by a plain noun (WHO_FOR, so "for independent bakeries" passes and "for free" doesn't), "Includes a number" looks for a digit, and "Fits in 120 characters" is the length. They are a guide, not a gate: only an empty pitch or one past 120 characters stops the submit, and the confirmation says how many checks the pitch met. A screen reader hears the count only when it changes.
Where do the figures for each stage come from?
They are fixed example data in STAGES: the range the fund typically writes at pre-seed, seed and Series A. Choosing a stage marks its row with a "Your stage" badge; the badge's slot is always there, so choosing a stage never moves the list. Replace the figures with your own policy, or remove the list, if you don't publish one.
What does the paying customers stepper accept?
A whole number from 0 up to a million. The plus and minus buttons and the arrow keys change it by one, and typing works too; thousands separators are accepted and stripped before the number is checked. Leaving it empty shows "Enter your paying customers, or 0." under it and moves focus there.
Why are the cells set apart?
Each cell draws its own lines and overshoot at its start corners, with a gap of 2rem between them so neighbouring lines never touch. That reads as three separate sheets of a drawing rather than one box with dividers, and the live panel can span the height of the two cells beside it from the lg breakpoint.
Related
- Pro
Risk Profile Allocation Contact
Finance and propertyA portfolio inquiry for an advisory firm: a risk slider over five named profiles that redraws a stacked bar of stocks, bonds and cash at full width, then a short inquiry form on ruled bands.
- Pro
Budget Cap Meter Contact
ApplicationsA grant application split by a hairline: four budget lines that add up against a $50,000 cap in a framed panel with a bar, a project length, a summary with a word count and a form that checks itself.
- Pro
Priced Add-ons Sponsorship Contact
Partners and creatorsA sponsorship builder: four priced add-ons with the reach each adds, a live total that rolls, the campaign goal and a form that confirms in place.
- Pro
Offer and Ask Partnership Contact
Partners and creatorsA partnership proposal in a card in card: a company, a work email, a website that is checked for its shape and two tag lists side by side, what you bring and what you are looking for, shown back on confirmation.
- Pro
Budget Range Slider Contact
Quotes and estimatesA roofing quote request as a card in a card: three kinds of job, a two-thumb budget slider that says in words what the range covers, and a short form that checks itself.
- Pro
Animal Cards Adoption Contact
ApplicationsAn adoption application that starts with four animal cells on shared hairlines and a slider for the hours a home is empty, with a list of the animals that suit you narrowing beside the form.