shadcn.io is not affiliated with official shadcn/ui
Platform Availability Footer Block for React
A footer for an indie game studio with a cell for each platform, a launch link where the game is out, and an age rating in the legal row.
Installation
Overview
Platform availability for Ashbarrow Games, an indie studio, for React with Base UI. Four cells, with hairlines that run a little past their corners: PC, Console and Mobile say Available and link to a launch page; Cloud says Coming soon and is not a link. A line above the cells counts how many platforms are open, from the same list. A short nav sits beside the brand, above the cells. The legal band carries a drawn 12+ mark and the line "Contains mild fantasy violence and in-game purchases". On a phone the cells are two across. It's built from Badge, Guides and your theme's tokens.
FAQ
How do I change the platforms?
Edit PLATFORMS at the top of the file. Each entry has a name, an icon, a state and an href. A real href renders a Launch link; null renders "Not offered yet" and no link. The "3 of 4" line is derived: it counts the entries that have an href, over the length of the list.
Why isn't Coming soon a button?
A control that does nothing looks broken. Cloud is a cell with a badge and the sentence "Not offered yet", and it is not in the tab order as a link. When the platform opens, give it an href and change the state to Available.
How does the age line work?
The drawn 12+ mark is decorative. The sentence next to it is the text people and assistive technology get: "Rated 12+. Contains mild fantasy violence and in-game purchases." Edit RATING for the sentence, and the mark if the number changes, and keep them in agreement.
How does it fit on a phone?
The cells are two across, with room between them so the corner marks do not touch. "Coming soon" can wrap inside its badge. The two link groups sit side by side under the brand, then the cells, then the copyright, the policy links and the age line.
How do screen readers move through it?
The block is a footer. "Where to play" names the list of platforms, and each platform name is a heading. Launch links include the platform name in their accessible name. The studio links are a nav labelled Footer. The age mark is hidden; the rating sentence is not.
Related
- Pro
SaaS Link Cells Footer
Link gridsA product footer for a scheduling tool: a lean brand row, three link groups as separate cells whose first link carries a one-line description and a badge, and a legal band.
- 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
Sibling Products Footer
Products and catalogsA footer for a studio with three apps: the brand and a row of links, then four cells sharing hairlines (a shelf title and a linked tile per app, each with a drawn mark), then the legal band.
- Pro
Promise Chips Footer
Trust and complianceA footer for a privacy-first analytics tool with a wrapping row of four check-marked chips (EU data residency, No ad trackers, Open API, Export anytime) and two link columns.
- Pro
Stat Cells Footer
Social proofA footer for an observability tool with four stat cells (events a day, uptime, regions, rating) above the brand and three link groups, with a legal band closing the page.
- Pro
Link Columns Footer
Link gridsThe classic link-column footer for an email API: a brand column with the wordmark, one sentence and four social links, four groups of links behind a split divider, and a legal band with the copyright and the policy links.