shadcn.io is not affiliated with official shadcn/ui
Offer and Ask Partnership Contact Block for React
A 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.
Installation
Overview
A partnership proposal section for React with Base UI, drawn on a card in card that follows your theme: a tinted shell with + marks on its corners and a raised panel inside it. The panel asks for a company, a work email and a website, then two tag lists side by side: "We bring" and "We are looking for". Each takes up to six short entries (Enter or a comma adds one, a pasted list is split on commas, an entry that is already there is dropped) and shows how many are used. Submitting checks every field, including that the website looks like a web address, shows each problem under its field, marks the control invalid and moves focus to the first one; a valid proposal turns into a confirmation in the same space that takes focus and shows both lists back as chips. It's built from Tags Input, Input, Field, Badge, Guides, Shine Button and Button, with CSS transitions for the entrances and your theme's tokens for every colour. For platforms, agencies and marketplaces that take partner proposals 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 partnerships inbox or CRM: details holds the company, email and website, and offers holds the two lists. Show the confirmation when the request succeeds, and an error line in the form when it doesn't.
How do the two lists work?
Each list is a tags input of its own, inside a small TagList component. Type an entry and press Enter or a comma to add it; paste "a, b, c" and each part becomes an entry. An entry has to be at least one character and at most 32, a repeat is ignored whatever its case, and a list stops at six (MAX_TAGS), counted under the field. Backspace on an empty field highlights the last entry, and the small cross on each entry removes it. Both lists are required: an empty one shows "Add at least one thing you bring." or its twin and takes focus.
How is the website checked?
webAddress adds https:// when there is no scheme, then checks the host: letters, digits and hyphens in at least two parts separated by dots, and no spaces. "bridgeway.example" and "https://www.bridgeway.example/docs" pass; "bridgeway" and "two words.com" don't. The confirmation shows the address with its scheme. The check only looks at the shape; nothing is fetched.
Why does the Base UI version keep the typed text in state?
Base UI's Input keeps its own copy of a value it was given at first, while the tags input clears the text after an entry is added, so the typed text would come back. The block holds the text in React state on this base only.
Does the card change height as you add entries?
Each list keeps room for three rows of entries (TAG_CONTROL), so a handful of short entries doesn't move the buttons. Past three rows the field grows, as any wrapping field does. The confirmation sits in the same grid cell as the form, so sending doesn't change the card's height either.
Related
- Pro
Talk to Sales Contact
Contact formsA talk-to-sales split for a scheduling platform: what happens next as three numbered steps and a band of contact details beside a form that checks itself, shows each problem under its field and confirms in place.
- Pro
Supplier Application Contact
ApplicationsA supplier application split in two: a code of conduct as a ruled list at the start, and at the end a form with a formatted tax ID, certification chips and a signature.
- 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
Card in Card Contact
Contact formsA card-in-card contact section for a bookkeeping service: the details of the desk you pick beside a raised form with a live message counter.
- Pro
Centered Seat-Capped Invite CTA
Urgency and limitsA centred card-in-card CTA with a tags input of teammate emails that stops at the seats a plan has left, ten seat dots that fill as you add chips and a Shine Button that counts the invites.
- Pro
Channel Switchboard Affiliate Contact
Partners and creatorsAn affiliate application laid out as ruled bands: a switch per channel wakes its link and audience fields in place, and an estimate band adds up example earnings beside the submit button.