shadcn.io is not affiliated with official shadcn/ui
Launch Card Footer Block for React
A footer with a raised launch card: an upvote toggle that really counts (1,248 to 1,249), a read-only star rating with its score and review count, and a Leave a review link, beside two link groups.
Installation
Overview
A launch-day footer for React with Base UI, for a product riding a launch on a made-up launch site. At the start, the wordmark with one sentence, then a raised launch card in a tinted shell: an upvote toggle that really toggles (1,248 becomes 1,249 and back, announced politely), a read-only star rating with its score and review count written out ("4.9 from 312 reviews"), and a "Leave a review" link. At the end, two link groups in a nav labelled Footer, and a legal band closes the page. The upvote is local to the page and is not saved. On a phone the parts stack and the card's rows wrap. The launch site, the counts and the score are made up.
FAQ
How does the upvote work?
It is a toggle button: pressing it adds one to the count and pressing it again takes it back. The state lives in the block and is not saved or sent anywhere, so wire it to your own endpoint if you want it to count. The pressed state is shown by the fill and read out as pressed, and a polite status line announces the new total.
How is the rating shown?
The stars only draw the score, rounded to the nearest half star. They are hidden from screen readers and cannot be focused, because the score and the review count are written next to them as text.
Can I use it after the launch?
Replace the card's content with whatever proof you have now: another site's score, a count of customers, an award. Remove it when it goes stale, because an old launch card makes a product look inactive.
Why is the launch site made up?
The block names no real platform and draws no one's mark, so there is nothing to misuse. The card's mark is a neutral drawing; replace the name and the mark with the site you launched on.
Related
- Pro
Review Sources Footer
Social proofA footer for a review-collection tool with three review-site cells, each with a drawn mark, a foreground star rating, the score, the count and a Read reviews link, above the legal band.
- Pro
Page Feedback Footer
PreferencesA footer that asks whether the page was helpful: a Yes and No toggle that opens a note form with validation, a status line that thanks the reader, and two link columns.
- Pro
Single Quote Footer
Social proofA footer for a field-service app with one customer quote and its speaker at the start, behind a split divider the brand and two link groups, and a legal band.
- Pro
Customer Result Footer
Social proofA footer for a dock-scheduling tool with one customer result: a big 38% figure beside a before and after bar pair in a framed figure, a Read the story button, and two link groups.
- Pro
Award Shelf Footer
Social proofA footer for a design-system tool with a shelf of four award cells, each a greyscale laurel drawn around a glyph with the award's name, category and year, above the legal band.
- Pro
Rewards Ladder Footer
Calls to actionA footer for a meal-kit service with a referral rewards ladder: three rungs (invite 1, 3 and 5) each with its reward, a meter toward the next one and the visitor's code with a Copy button.