shadcn.io is not affiliated with official shadcn/ui
Streamer Goal and Support Feed Profile Block for React
A streamer profile with a goal ladder and a support feed: the channel and a Live word in the person band, the subscriber goal as a bar with three milestone ticks and their states in words, and a tier-filtered feed of supporters with a polite count and a sum.
Installation
Overview
Show a channel's goal and who backed it, with this streamer goal and support feed profile for React with Base UI. A compact header holds the title and one sentence, and the hairline frame under it opens on the streamer: initials, name, role and channel, and a dot with the word "Live" (typed, with no switch: nothing streams here). Under it the frame is split in two. The main cell is the subscriber goal: the count as the one big figure, a bar against a ladder of twelve hundred with three ticks, the three milestones as a list (what each unlocks, where it opens, and in words either "Unlocked" or how many subscribers remain), and a row of three sums worked out from the feed. The end cell is the support feed: a Toggle Group (All, Tier 1, Tier 2, Tier 3) over a fixed-height scroll region of supporters, each with initials, a name, how long ago (counted from a fixed "now"), the monthly amount and a tier badge, and a polite count with the sum of what it shows. On a phone the feed goes under the goal. It's built from Progress, Toggle Group, Status, Badge, Avatar and Guides. Every figure is typed sample data and labelled "Sample stats". The streamer, the channel and the supporters are invented. For a streaming platform, a creator's channel page or any profile with a goal and a feed.
FAQ
How do I fill it with my own channel?
Edit SUBSCRIBERS, LADDER and MILESTONES (each has what it unlocks and the count it opens at) for the goal, and FEED for the supporters (a name, a tier and a time; the amount comes from the tier's price in TIERS). The bar's fill, the three ticks, the milestone states, the sums and the "how long ago" are worked out from them and the fixed AS_OF_AT. Money is kept in cents.
How are the bar and the milestones read by assistive technology?
The bar is a picture and is hidden from screen readers; what it shows is said in text beside it ("412 subscribers, 88 to a new emote slot") and by the milestone list, where each row says what it unlocks, the count it opens at and "Unlocked" or "88 to go". A milestone's state is a check mark or an empty circle and a word, never colour. The bar and its ticks keep left-to-right order in a right-to-left layout.
How does the tier filter and the feed work?
Picking a tier narrows the feed to that tier and says so in the status line ("Showing 2 of 14 supporters, Tier 3, $49.98 a month."); All puts everything back. The feed is a scroll region with a fixed height, named "Support feed" and reachable by keyboard, so a short list leaves room under it and the panel never changes height. The sum is the monthly total of the supporters shown.
Is the channel really live, and does anything stream?
No. "Live" is a typed word with a dot, there is no player, no chat and no switch, and the header says nothing streams here. In your app, drive the word from your platform's state and add the stream beside the goal; keep the goal and the feed as they are.
How does it look on a phone?
The goal comes first with its bar, the three milestones and the three sums, then the support block with its filter and the feed in a region about 20 rem tall. The tier buttons share the row equally. The count and the sum are in the status line under the feed.
What stays local, and how do I wire it to real data?
Everything: the filter only changes the page and the status line, and the figures are samples, as the badge says. To wire it up, replace the typed constants with your platform's subscriber count, goal and recent supporters (a server component or a subscription can pass them in), and keep the helpers that derive the milestone states, the sums and the ages. No amounts are charged or sent from here.
Related
- Pro
A podcast host profile as a season grid: three seasons by up to ten episodes shaded in four weights by downloads or length, a triangle on each season's best, and a band with the picked episode's guest, date, length, downloads and its season's average.
- Pro
A music listener profile with top artists by range: a start cell with the listener and facts from the history, and a segmented control that re-ranks ten artists in place with plays, a share bar and the move against the period before as a sign and an arrow.
- Pro
A DJ profile as upcoming gigs under month rules: venue, city, doors time in the city's own hours and genres on each row, a city menu and genre chips that narrow the list, sold-out nights with no ticket button, and an Add to calendar button that saves a real .ics file.
- Pro
A radio presenter profile as the station's weekly programme: Monday to Sunday by hour as a table of shows that span their hours, a line at the fixed now, the show on air named, a card for each picked show, and day tabs on a small screen.
- Pro
Target Line Bar Chart Stats
Bar and columnFourteen daily bars against a labelled quota line in a framed chart, days at or above the quota solid and days below it outlined, with a two-cell band under it for days met and the average against the quota.
- Pro
Goal Ring Tiles Stats
Goals and progressFour goal tiles for an OKR tool, each a thin ring with the part done drawn solid, the part today's pace will add drawn lighter after it and a tick for the target, with the projected finish in words.