shadcn.io is not affiliated with official shadcn/ui
App Rating Download Footer Block for Ark UI
A footer for a grocery-list app with a star rating, the phone versions it supports, and two store links in the brand column, beside three groups of links.
Installation
Overview
An app-download footer for React with Ark UI, for a product people install on a phone. Larderby’s brand column holds the wordmark, one sentence, a read-only Rating and two store links. The stars are foreground. The average and the count beside them are derived from a typed tally of ratings, and the stars draw the nearest half, which here is the same 4.5. Under that, one line names the phone versions the app supports. The first store link is a ShineButton, the second an outline Button, each with a generic device mark rather than a store logo. A nav labelled Footer holds three groups (Product, Lists, Company) of four links. A legal band carries the copyright and three policy links. The rails and the top rule come from the Guides spine, so the footer joins the block above it with one line, and nothing else rules the columns. On a phone the groups sit two per row, with the third wrapping under them. It’s built from Rating, ShineButton, Button, Guides and your theme’s tokens, with no JavaScript of its own.
FAQ
Where do the stars and the count come from?
From TALLY at the top of the file: a count of ratings at each star. The file adds them up. The average is GIVEN / TOTAL, shown to one decimal, and the stars draw the nearest half (DRAWN). With the counts shipped here both are 4.5, from 7,200 ratings. Replace the five counts and the text and the stars follow. The stars are readOnly inside an inert wrapper, so they are not a control; the sentence beside them is what a screen reader gets.
How do I point the buttons at the real listings?
Each button is a link with href="#". Put the listing URL on that anchor. The labels say “Download for iOS” and “Download for Android” and the icons are generic devices, because the icon set has no store logos. Keep a visible label if you swap the icon.
How do I change the link groups?
Edit GROUPS and LEGAL. Each group is a title and four links, each link an href and a label. Three groups fill the grid: two columns on a phone, three from md. A fourth group needs the column count changed to match.
How do screen readers move through it?
The block is a footer element. Outside main, it is the page’s content-info landmark. The three groups sit in a nav labelled Footer, each a small h2 over a list. The rating is decorative; the line “4.5 out of 5 from 7,200 ratings” is the text. The policy links are a list named Legal. Every link and both buttons show the theme’s focus ring.