Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Language Pair Quote Contact Block for React

A translation quote request where a band of two searchable languages with a swap button sets the rate, and a word count and a turnaround write an example price and delivery day.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

A translation quote for Parleywick, a fictional translation agency, built for React with Base UI. A band across the top holds the language pair: two searchable lists of sixteen languages with a swap button between them, and a pair of the same language is refused. Under it a Number Input takes the word count and a Segment Group chooses Standard or Rush. At the end of that band a quote in a Data List shows the rate per word, the words, a delivery day and the total, all worked out from what was typed. Name and email come last. Submitting checks every field, shows each problem under its field, moves focus to the first one, and then says in a status line what the form noted and that nothing is sent in this demo. It's built from Combobox, Number Input, Segment Group, Data List, Field, Input, Guides, Shine Button and Button, with a CSS entrance on the header and your theme's tokens for every colour.

FAQ

Where does the quote request go?

Nowhere. The submit handler checks the fields and shows a status line saying what it noted, and that nothing is sent in this demo. Replace the setDone call in submit with your own request: details holds the pair, the word count, the name and the email, and turn the turnaround.

How is the example price worked out?

Each language has a tier from 1 to 3. The rate per word is 9, 12 or 16 cents for the harder language of the pair, plus 2 cents when neither language is English. The total is words times rate, 50 percent more for Rush, with a minimum order of $25.00. The figures are invented and labelled as examples, not an offer.

Where does the delivery day come from?

Standard is 3 business days and Rush is 1, plus one more business day for every 5,000 words past the first batch. The days are counted from a fixed example order on Monday, November 2, 2026, skipping weekends, and the block says so. It never reads the visitor's clock.

How does the language pair behave?

Choosing the same language twice is allowed while typing and refused on submit, with the message under the second list. The swap button exchanges the two and clears both messages, and a polite hidden line announces the new pair. Each list is a searchable input with the list under it; typing narrows it and choosing a language fills the field.

What counts as a valid word count?

A whole number from 1 to 50,000. The field groups digits as you leave it, and the plus and minus buttons move one word at a time, so typing is the quick way. Anything else shows the message under the field on submit.

How does it fit on a phone?

Below md the language band stacks into two rows with the swap button on a row of its own, its arrows turned to point up and down, and the quote follows the fields. The fields never move when an error appears, because every field keeps a one-line slot for its message. quotes@parleywick.example and +1 (212) 555-0173 are fictional.

  • Pro

    Placement Fee Estimate Contact

    Quotes and estimates

    A staffing-agency form that estimates a placement fee from the hire type, the rate and the number of seats, and labels the figure as an example.

  • Pro

    A consultation request for an advisory firm, with a 15, 30 or 60 minute choice that sets the price and the questions the call will cover.

  • Pro

    Talk catalogue Contact

    Calls and meetings

    A speaker request that starts with a catalogue of four talks, then a form that carries the chosen talk, the audience size and the event date.

  • Pro

    Budget Range Slider Contact

    Quotes and estimates

    A 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

    A robotics hiring form that starts with a single PDF dropzone, then a role combobox, a start date and an optional LinkedIn field.

  • Pro

    A 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.