shadcn.io is not affiliated with official shadcn/ui
Full-Bleed Launch Banner Block for React Aria
A launch-week callout for a product analytics tool: a tinted band with a header and a waitlist button, then five day cells, one launch each, today's lit.
Installation
Overview
A full-bleed launch callout for React with React Aria. A faint tint of the theme's muted colour runs across the whole width of the page. Between the page rails a header names the week, "Launch week", with one sentence under it (five days, five launches for Larchfold v2) and an outline Shine Button, "Join the waitlist", at the end. Below it a band of five cells sits on shared hairlines, one launch a day: a day chip, the launch's name and a status line. Day 1 is live: its cell is lit on the card colour and carries a solid dot and "Live now"; days 2 to 5 carry a quiet dot and "Soon". There are no dates, so nothing goes stale as the week passes. From the medium breakpoint the cells share the width in five columns; on a phone they scroll sideways in a labelled strip and snap one by one. The band ends on the next block's top rule. It follows the theme, with no black panel. Built from Guides, Badge, Status and Shine Button. For launch weeks, release trains and any run of announcements that deserves its own calendar.
FAQ
How do I change the launches, or move to the next day?
Edit DAYS at the top of the file: each entry has a title and a live flag. Set live to true for the launches that are out; the cell is lit and its status line reads "Live now". When a second day goes live, flip its flag and the earlier one can stay lit or not as you prefer. The day chip numbers itself from the entry's position, "Day 1" to "Day 5". The lit cell also carries aria-current, so a screen reader hears which one is live.
Why are there no dates?
A date in a banner goes stale the day after the launch week ends, and a banner with a wrong date is worse than none. The cells say "Live now" and "Soon", which stay true as you update the flags. If your week has fixed days, put the weekday names in the titles yourself.
How does it fit on a phone?
Below the medium breakpoint the five cells are a horizontal scroller, each cell 85% of the width so the next one peeks in, snapping one at a time. The scroller is a list with a label and a tab stop, so a keyboard user can focus it and scroll with the arrow keys, and it shows a focus ring inside its edge. The header stacks: the text, then the button.