shadcn.io is not affiliated with official shadcn/ui
Audience Index Influencer Contact Block for Solid
A creator enquiry in a compact frame: a switch between three kinds of channel, an audience slider with five named stops, and a readout of the tier and a typical rate per post, labelled as an example.
Installation
Overview
A creator enquiry section for Solid with Ark UI, drawn in a compact frame that follows your theme: a tinted frame with + marks on its corners and a raised panel. The panel opens with a switch between three kinds of channel (a photo feed, short video and long video, each with a drawn icon), then an audience slider with five named stops, 10k, 50k, 100k, 500k and 1M+, repeated as buttons underneath so a phone can tap one. A readout names the tier (Micro, Mid or Macro) and a typical rate per post, worked out from the stop and the kind of channel and labelled "Example only". Then what you make in a select, a channel name and an email. Submitting checks the fields, shows each problem under its field, marks the control invalid and moves focus to the first one; a valid enquiry turns into a confirmation in the same space that repeats the fit. It's built from Segment Group, Slider, Select, Field, Input, Badge, Frame, Guides, Shine Button and Button, with CSS transitions for the entrances and your theme's tokens for every colour. For brands that brief creators by form, with no real platform named.
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 creator inbox or CRM: details holds what the creator makes, the channel name and the email, kind the kind of channel and stop the index of the audience stop.
Where do the typical rates come from?
They are fixed example numbers. STOPS holds a low and a high rate per post for each audience stop on a photo feed; KINDS holds a factor (short video 0.8, long video 1.6) that scales both, and rateAt rounds the result to the nearest 10 dollars. The readout and the confirmation both say "Example only", and the MDX of your own page should say what your real rates depend on. Swap in your own rate card, or drop the readout if you don't publish one.
How do the slider and the stop buttons work together?
They are two controls for one value. The slider has five steps and says the audience in words ("About 100,000 people") to a screen reader; the buttons are real buttons that keep aria-pressed, one per stop, so a tap lands exactly. Pressing a button moves the slider, and sliding presses the matching button. The slider's range and thumb take the text colour, not the primary colour.
Why aren't there real platform names?
The three kinds of channel are generic on purpose, "Photo feed", "Short video" and "Long video", with icons drawn from the icon set rather than any brand's logo, so the block never names a product it doesn't own. Rename them in KINDS to match your own brief.
How is the select labelled?
The label above it names the select's button for screen readers. The Field takes the select's id, so its label and the hidden native select share it.
How does it fit on a phone?
The header and the frame stack in one column. In the channel switch the icon sits above each label, the slider keeps its five stops lined up with the buttons below it, the name and email go one per row, and the submit button goes full width, so nothing scrolls sideways at 320 pixels.
Related
- Channel Switchboard Affiliate ContactPartners and creators
- Priced Add-ons Sponsorship ContactPartners and creators
- Budget Range Slider ContactQuotes and estimates
- Card in Card ContactContact forms
- Centered Light Tier Selector CTAPickers and toggles
- Brief Builder with Budget Slider ContactPartners and creators