Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Banner blocks

Pro

Expandable Timeline Banner Block for Svelte

A parcel notice for a tracking product as a disclosure: a header that names the current stage and its step, and a vertical four-step timeline when opened.

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 parcel banner for Svelte with Ark UI, for a journey whose current stage matters more than its history. A card sits between the page's solid rails with one header line: a dot, "In transit to the Berlin hub", "Step 3 of 4" and a chevron, and the whole line is the trigger of a disclosure that starts closed. Opened, it draws the journey as a vertical timeline of four steps: finished steps with a filled check, the current one ringed, the next one muted, joined by a line that is solid up to the current step. Each step says its time as text, and on a phone the time drops under the label. The height opens on one grid row with a CSS transition. It's built from Collapsible, Status and Guides, and it follows the theme.

FAQ

How do I change the steps?

Edit STAGES at the top of the file: each entry is a label, a state (done, current or next), a time and an optional detail. The header's title and its "Step 3 of 4" are written in the markup: update them with the list, or derive them from the current entry.

Is the state clear without colour?

Yes. The timeline is an ordered list, and each step starts with a visually hidden word, "Completed", "Current" or "Upcoming", while the current step also has aria-current="step". The markers are decoration: a check, a ring and an empty circle differ in shape as well as in weight.

Why are the times plain text and not dates?

A parcel's times are facts of its journey ("Mon 09:12", "Arrives Wednesday 10:00 to 14:00"), so they are text in the data, in a bdi element so a right-to-left layout keeps them whole. Feed them from your tracking data; there is no timer in the block.

How do I start it open?

Give Collapsible the defaultOpen prop.

It starts closed because a banner should take one line until someone asks for the whole journey.

What moves, and what happens with reduced motion?

The card fades up once on load, the panel's height eases open and the chevron turns over, all with CSS. With reduced motion turned on the panel opens at once and nothing animates.

How does it fit on a phone?

Each step puts its time under its label instead of at the end of the row, and the detail line wraps. Nothing scrolls sideways at 320 pixels, and in a right-to-left layout the markers, the connecting line and the chevron move to the other side.

All 100 banner blocks