App Install Pill Banner Block for React

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))].

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.

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 the link it's given with render, with nativeButton={false}.

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.

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.

Yes. The tile is a plain span holding an icon on bg-foreground text-background, so it works in any theme. Replace it with your app's icon image (a size-10 rounded-xl box with overflow-hidden) and keep it aria-hidden: the name beside it already says what it is.