Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Features blocks

Pro

Photo Booth Strip Features Block for Svelte

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.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

A state-strip feature section for Svelte 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.

What does a screen reader hear?

The drawings are hidden from assistive technology, because they are pictures of a card. What it hears is each frame's name as a heading and the sentence that explains it, in order, plus the three facts about the kit.

Does it work right-to-left?

Yes. The spine, the nodes and the split flip to the other side, and the timecode keeps its own direction because a clock reads the same everywhere.

All 170 features blocks