shadcn.io is not affiliated with official shadcn/ui
Photo Booth Strip Features Block for React
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 React with Base 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.
Related
- Pro
Filmstrip Frame Row Features
Carousels and mediaA storyboard row of five numbered frames for a demo recorder, each a small greyscale drawing with a scene line, in one band of shared hairlines in a snapping scroll area with a visible scrollbar thumb.
- Pro
Timeline Evolution Story Features
Timelines and stepsA features section that tells five years of an edge runtime as year tabs on one rail: what shipped, a cold start before and after in rolling digits, and a five-bar history of regions.
- Pro
Road Trip Milestone Path Features
Timelines and stepsA shipment's route as one vertical road with five stops that alternate sides, solid up to the truck's stop and dashed beyond, each with its time and a done, now or expected badge.
- Pro
Form Validation Checklist Features
App screensA sign-up form that checks itself: a card with email, password and confirmation beside six password rules and a strength meter that update as you type, with a submit button that stays disabled until every rule passes.
- Pro
Before After Visual Features
Proof and comparisonsThree measured outcomes as ruled rows, each with its own Before and After control that swaps both the figure and the bar: page weight, load time and weekly support tickets.
- Pro
Sticky Headline Scroll List Features
Headline-ledA feature list for a developer platform: a narrow headline column that stays in view beside eight numbered rows, each ending in a compact mockup of the feature.