shadcn.io is not affiliated with official shadcn/ui
Enterprise Request Billing Block for React
A Talk to us dialog shown open over a drawn plans page: seats, needs and a work email decide in words whether Business is self-serve or Enterprise needs a quote, and the button follows.
Installation
Overview
Route buyers to the right plan before they email you, with this enterprise request dialog for React with Base UI. It is shown open in place over a drawn Plans page for the preview, and its header holds the real "Talk to us" button. The Dialog asks for seats in a Number Input, what you need as four Checkboxes (single sign-on, data residency, a custom contract, invoicing by purchase order) and a work email, and a line at the foot says where the answers lead. Under 100 seats and no custom terms, Business is self-serve and no call is needed, so the Shine Button, the only colored control, reads "Go to Business". From 100 seats, or with a term Business can't cover, the line gives the reasons, the button reads "Request a quote" and the email becomes required and shape-checked. Closing the dialog draws the chosen plan on the page behind it. It's built from Dialog, Number Input, Checkbox, Field, Input, Button and Shine Button, with a CSS entrance only. For pricing pages, plan upgrades and any product with a self-serve tier and a sales-led one.
FAQ
How do I change the needs and the threshold?
Edit NEEDS (each has a label, a hint and whether it needs Enterprise) and THRESHOLD, the seat count from which Enterprise applies. The routing is one small function, routeOf, which returns the plan and the sentence. Add a need or a rule there and the button label and the line follow.
Why is the dialog open when the page loads?
So the preview shows the whole flow. On load it is a native, non-modal dialog drawn in place over the page, so nothing is trapped or focused. Pressing "Talk to us" opens the real Dialog with a focus trap, Escape and focus returning to the button, and the in-place copy stays closed until a reload. In your app keep the Dialog and delete the in-place copy: the "in-place" state, the scrim and its dialog element, and the Escape effect.
When is the email required?
Only on the Enterprise route. Business is self-serve, so the email is optional there. On the Enterprise route the field is checked when you leave it, or when you press "Request a quote", and an error shows in text with a red icon in a space reserved under the field, so the dialog never jumps. Once an error shows, it follows your typing and clears when fixed.
What stays local, and how do I wire it for real?
Nothing is sent. "Go to Business" and "Request a quote" close the dialog, mark the plan on the page behind it and say so in a status line that notes nothing was sent or opened. In your app send the seats, the needs and the email to your sales inbox or CRM on the quote route, and link the Business route to your sign-up with the seats in the address.
How does it work with a keyboard and a screen reader?
The dialog is labelled by its title, the needs are a group with a legend, each box is named by its title and hint, and the route line is a polite live region, so changing a seat count or a box is read out. Escape closes the dialog (the real one or the in-place copy) and focus returns to "Talk to us".