Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Profile blocks

Pro

Media Kit Brand Ambassador Profile Block for Vue

A brand ambassador profile as a media kit you can take: audience bars by age and region that add up to 100, three past partners with their reach and rates, a discount code with a real Copy button, and a download of a plain-text kit written from the same numbers.

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.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

Give a creator something to send a brand, with this media-kit profile for Vue with Ark UI. A compact header holds the title and one sentence, and the hairline frame under it opens on the ambassador: initials, name, role, place and a badge with her monthly reach. The audience is two lists of bars, by age and by region, drawn from typed counts of the same 94,000 people and printed as whole percentages that always add up to 100 (largest remainder), with each bar scaled to the largest. Three past partners, invented brands each with a two-letter mark, show their reach and what share of it clicked and what share of the clicks bought, worked out from typed counts. The rates are a Data List of prices, and her code for her current brand is typed text with a Copy button that really uses the clipboard (and says so, or says it was refused) and counts the days the code is valid from a fixed date. The foot's one Shine Button downloads a plain-text kit written from the same numbers with Download Trigger, and a polite line says what was saved and that nothing was sent. The ambassador, the brands and every figure are invented samples. For a creator's rate card, an influencer page or any profile that ends in a file to hand over.

FAQ

How do I fill it with my own audience and partners?

Edit AGES and REGIONS (a label and a count of people each; both should add up to the same audience), PARTNERS (reach, clicks and orders per campaign), RATES and the code in BRAND, CODE, CODE_OFF and CODE_UNTIL. The percentages, the click and buy rates, the days to go and the text of the kit are all worked out from those numbers, so nothing is typed twice. AS_OF is the fixed day the days are counted from; replace it with the current date when you wire it up.

Why do the percentages always add up to 100?

Rounding each share separately can add up to 99 or 101. The page takes the whole part of each share, then gives the missing points to the shares with the largest remainders, so the list always adds up to 100. The same numbers go into the download.

What is real, and what stays local?

The download and the Copy button are real: the first saves a plain-text file written in your browser, the second puts the code on your clipboard (and says so when the browser refuses it). Everything else is a typed example, the brands are invented and nothing is sent anywhere. In your own app write the kit from your own data, and say how old the figures are.

What is in the kit file?

Plain text, one line for each fact: the name and role, the audience by age and by region with the counts, each past partner with its reach and rates, the price list and the code with its end date. The status line says the file's name and how many lines it has.

Is it accessible, and how does it look on a phone?

Each list of bars is a named list with its figures as text, the bars are decoration, and the Copy button is named for its code ("Copy code CASSIAN15"). The status line is a polite live region present from the start. On a phone the two lists stack, each partner's three figures sit under its name, and the status and the download stay pinned to the bottom of the screen. Prices and the code keep their reading order in a right-to-left page.

All 100 profile blocks