shadcn.io is not affiliated with official shadcn/ui
Stories Gallery Block for Solid
A tray of six round highlights for a day-journal app that opens a full-screen viewer with segmented progress bars, tap zones, Previous and Next, a Pause toggle, auto-advance and focus that returns to the highlight.
Installation
Overview
A stories gallery for Solid with Ark UI, for Dailyleaf, a day-journal app. A compact header sits over a band that ends the block and holds six round highlights: a ring around a drawn cover and a label under it, the ring thinning once a highlight has been read. Each opens one viewer dialog, full screen on a phone: segmented bars across the top (one per page, the filling one is the timer), the page as a drawn picture with its date and a line of the journal on a masked foot, tap zones (the start edge goes back, the rest goes on), Previous and Next, a Pause toggle and a close button. Pages turn every five seconds and run on into the next highlight; the timer stops while the pointer is over the viewer, while keyboard focus is inside it and when paused, and with reduced motion it starts paused. Escape closes, and focus returns to the highlight last shown. The pictures are drawn, not photographed: a desk, a plate, a window sill and a skyline in your theme's greys. It's built from Dialog, Carousel, Toggle, Button and Guides. The journal and its pages are made up for the example.
FAQ
How do I use my own pictures?
Each highlight in STORIES has a label and pages; each page has a date, a day, a line and a scene. Replace the Scene on a page (and the cover in the tray) with <img alt="" className="size-full object-cover" src={…} />; the caption names the picture. Pages are 9 wide for 16 high and the picture is cropped to the viewer, so keep the subject near the middle.
How does the timer work?
The filling bar is a CSS animation over five seconds; when it ends the viewer goes to the next page, and after the last page into the next highlight. At the end of the last highlight the timer stops and Next says "Done". The Pause toggle holds the animation, and so do the pointer over the viewer and keyboard focus inside it. Under reduced motion the toggle starts pressed and nothing advances until you start it. Change the 5s in FILL to change the pace.
How does it work with a keyboard?
Tab reaches each highlight and Enter or Space opens it. Inside, the arrow keys step through the pages (mirrored in a right-to-left layout) and on into the next or the previous highlight, Tab cycles through the bars, Pause, close, Previous and Next, and Escape closes. The tap zones are for pointers only and are out of the tab order. Moves you make are announced; the timer's are not. Focus returns to the highlight last shown, not the one you opened, so step into another highlight and close and you land on that one.
The Dialog takes finalFocusEl, a function that returns that highlight.
What does the ring mean?
A full ring is a highlight you have not opened in this visit; a thin one has been read. Screen readers hear ", read" after the label. The state is kept in the page only: nothing is saved.