Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Banner blocks

Pro

Expandable Timeline Banner Block for React

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 React with Base 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.

  • Pro

    Expandable Banner

    Disclosures and tabs

    A fee-change notice for a rent-collection tool as a card in card: one header line that opens a sentence, three rows of facts (Now, From next renewal, Why) and a link.

  • Pro

    Collapsible Details Banner

    Disclosures and tabs

    An incident notice for a status-page product as a disclosure: one summary line with an Investigating badge, and open it explains the incident and lists the four affected services.

  • Pro

    Numbered Onboarding Steps Banner

    Numbered lists

    An interactive five-step setup checklist as a card in card: Start completes the next step and the button moves down a row, with a live count and an All set state.

  • Pro

    Numbered Steps Banner

    Numbered lists

    A setup tracker for a workspace tool: four numbered steps in a row joined by a line, finished ones checked, the current one ringed, and a Resume button under it.

  • Pro

    Expandable Code Banner

    Disclosures and tabs

    An install notice for a CLI toolkit as a disclosure: a header with a version badge opens package-manager tabs and the command in a mono box with a Copy button.

  • Pro

    Live Indicator Banner

    Live status

    A heartbeat callout for a monitoring tool: a framed status dot that sends out one ring on each poll, an all-systems-operational heading, a line with how long ago it checked and the p95 latency, and a status-page link.

All 100 banner blocks