shadcn.io is not affiliated with official shadcn/ui
App Install Pill Banner Block for React Aria
An install pill for a plant-care app: a greyscale app tile, the name, a row of stars with its score, a small Get link and a dismiss button that folds the block away.
Installation
Overview
An app install pill for React with React Aria, for a site that has a mobile app worth a nudge. A capsule sits in a muted shell between the page's rails: a greyscale tile with the app's glyph, the app's name, a row of five stars filled to its score and the price, a small outline Shine Button that links to the store, and a ghost dismiss button. On phones the pill wraps to a rounded card (tile, name and dismiss on top, a full-width Get under them) and the stars give way to the score. The pill rises into place once on load. Dismissing folds the whole block away with a CSS height transition, down to its top rule, and keeps the keyboard where it was. It follows your theme, and primary stays on your page's own call to action. It's built from Guides, Shine Button and Button.
FAQ
How do I pin it to the bottom of the screen?
The pill renders in flow so the preview, a stack of blocks and your own layout can all see it. To float it, add fixed inset-x-4 bottom-4 z-50 mx-auto to the pill (the section that holds the shell) and remove the block's wrapper padding (py-8 md:py-12) if the pill lives on its own. On phones it then fills the width between the insets; from sm it is centred and as wide as its content. Keep room for the home indicator with bottom-[max(1rem,env(safe-area-inset-bottom))].
Why is the rating hidden from screen readers?
The stars are decoration: a row of five items would be noise for someone who only needs the number. The row is aria-hidden, and a visually hidden line says "Rated 4.8 out of 5, Free" instead. The score is a plain number in bdi, so it reads the same in a right-to-left layout. Change APP.score and the stars fill to match, a partial star included.
Where does the Get link go, and can I send people to the right store?
Get is a link (href="#"): point it at your store listing. To send each platform to its own store, read the platform on the server (the User-Agent header) and pass the matching URL, or link to a smart redirect on your own domain. The link's visually hidden suffix gives it the app's name, so a list of links in a screen reader reads "Get Alderfield".
It renders a link because it has an href.
What happens when someone dismisses it, and can it stay dismissed?
The block's rows shrink from their full height to nothing while the pill fades, in 300 ms, and it ends at its top rule, so the next section's rule takes its place. Once folded it is inert and hidden from screen readers, and focus moves to a short visually hidden line, "App banner dismissed.", so the next Tab carries on from the same spot. With reduced motion it closes at once. To remember the choice, write a key for this banner to a cookie in the dismiss handler and read it on the server, so the pill is never rendered for someone who closed it; reading it in an effect would show the pill for a frame and move the page when it folds.
How does it fit on a phone?
Below sm the pill is a rounded card: the tile, the name and the score, and the dismiss button share the first row, with the dismiss button at the end, and the Get link takes the full width under them. From sm it is one row and a full capsule. At 320 pixels nothing scrolls sideways, and in a right-to-left layout the pill mirrors.