shadcn.io is not affiliated with official shadcn/ui
Photo Album Timeline Block for Ark UI
A family memories timeline with eight drawn greyscale scenes alternating either side of a centred spine, an All memories or On this day toggle, a today select and an empty state for a day with no memory.
Installation
Overview
Bring back the memories that fall on today's date with this photo album timeline for React with Ark UI. It is written for Memorylane, a fictional family diary. A hairline frame with plus marks holds a band and eight memories from 2022 to 2025. Each has a small greyscale drawing (a hill, a boat, a house, a bridge, a tent or a dinner table), a caption, a place and a date. From the medium width they alternate either side of one spine; on a phone they stack along a rail at the start. An All memories and On this day Toggle Group in the header keeps only the memories whose month and day match today and says how long ago, such as "3 years ago today". A "today is" Native Select moves the demo's date between four days, one of which has no memory and shows an Empty state. The list keeps its height under every choice. Drawings, no photos. The memories are example data.
FAQ
How do I change the memories?
Edit MEMORIES at the top of the file: an ISO date, a title, a place and one of six scene kinds. Add a scene by writing a small component in the same shape as HillScene.
Why is there a today select?
The page cannot know your date without the clock, which would change what the server and browser draw. The demo fixes the year at 2026 and lets you pick a day; in your app set it from the current date after mount.
How do I see the empty state?
Choose On this day, then 2 Feb in the select: no memory falls on that date.
Does the panel move when I filter?
No. The shown list sits over an unseen copy of all eight memories, so the height is the same whatever the lens.