shadcn.io is not affiliated with official shadcn/ui
Brief Builder with Budget Slider Contact Block for Ark UI
A freelance-marketplace brief with skill tags, a fixed or hourly budget slider, a timeline, and a published line that typical briefs get 6 replies in a day.
Installation
Overview
A brief builder for React with Ark UI, for Craftbench Marketplace. The form asks for a title, an optional description, up to 6 skills as tags, a budget and a timeline, then a name and an email. Fixed and Hourly are a Segment Group: choosing one swaps the Slider's range, step and unit, and sets the amount back to that range's start. Under the slider a line reads "Typical briefs get 6 replies in a day", counted from a constant, not from the slider. Submitting checks the fields, shows each problem under its control and moves focus to the first one. A valid brief turns into a confirmation in the same space, repeating the title, the amount, the timeline, the email and the skills. The page's rails and top rule come from Guides. It's built from Field, Input, Textarea, Tags Input, Segment Group, Slider, Select, Shine Button, Button and Guides, with CSS for the header entrance and your theme's tokens for every colour. For marketplaces, studios and any page where a visitor posts a piece of work.
FAQ
Where does the brief 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 title, description, budget kind, amount, timeline, name and email, and skills holds the tags. Show the confirmation when the request succeeds, and an error line in the form when it doesn't.
How do the skill tags work?
Type a skill and press Enter, or pick one of the suggestions under the field. The list stops at 6, from MAX_SKILLS, and a duplicate or an empty chip is turned away with a short note. At least one skill is required. The same Tags Input parts are used on every base.
What changes when the budget type changes?
Fixed runs from $500 to $20,000 in steps of $500 and starts at $4,000, labelled "for the whole project". Hourly runs from $25 to $250 in steps of $5 and starts at $80, labelled "for each hour". Switching type sets the amount back to that range's start, so a fixed price is never left sitting on an hourly scale. Only the active range is mounted, so the slider keeps a single thumb.
The slider takes value as a one-item array, onValueChange reads value[0], and getAriaValueText receives { value }.
Does the slider change the replies line?
No. "Typical briefs get 6 replies in a day" is a published promise. The 6 is REPLIES. Moving the slider does not announce a new count, and the confirmation does not claim that 6 people have already replied.
How is the timeline select labelled?
The label above it names the control, and focus can land on it when the timeline is missing. The Field takes the select's id, so its label and the hidden native select share it, and focusing that select passes focus to the button.
Are the email address and phone number real?
No. hello@craftbench.example uses the .example domain, which is reserved for examples, and +1 (415) 555-0188 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.