shadcn.io is not affiliated with official shadcn/ui
Photo Booth Strip Features Block for Vue
A vertical strip of four frames showing one card as empty, loading, error and success, with a numbered spine, held timecodes, a sticky header and a split divider.
Installation
Overview
A state-strip feature section for Vue with Ark UI. A split divider separates the copy from the strip. At the start, a sticky header says "Four states, drawn before the first one ships" and a list of three facts about the kit follows it. At the end, four frames run down a hairline spine with numbered nodes: one "Recent exports" card drawn empty, loading with skeletons, failed with a retry, and filled with its rows. Each frame sits under a bar with its number, a held timecode and the state's name, and is captioned with what the state does. It's built from Skeleton, Timecode Text and Badge, with your theme's tokens for every colour. For design systems, component libraries and any product that wants its empty and error states taken seriously.
FAQ
How do I change the card or the states?
The four drawings are small components at the top of the file, EmptyCard, LoadingCard, ErrorCard and SuccessCard, and FRAMES lists each frame's name, caption and second. Draw your own component in their place; keep the frames the same height so the strip stays even.
Why do the timecodes not run?
Each frame is a moment in a recording, so its timecode is held at that second: 00:00:00, 00:00:02, 00:00:07 and 00:00:12. They use the Timecode Text component with running={false} and no frames, and the full time is available to a screen reader.
Does the skeleton pulse?
No. The loading frame is a still drawing, so nothing on the page moves by itself and no pause control is needed. Remove animate-none from the skeletons if you want them to pulse, and add motion-reduce:animate-none.
Does the header stay in view?
On large screens the header column is sticky, so it stays beside the strip as you read down it. Below lg the strip sits under the header and nothing is sticky.