Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Notification blocks

Pro

Shipping Update Notification Block for Solid

A parcel-tracking update for a shop order: four steps in hairline cells standing at In transit with their days, the tracking number with a working copy button, the estimate and carrier, and a Select that rewrites which messages you will still receive.

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

Tell a customer where their parcel is and let them choose how much to hear, with this shipping update for Solid with Ark UI. It is Parceline, a parcel-tracking service for shops, in one hairline frame with a plus mark on each corner. The top band is four read-only Steps in cells (Ordered, Shipped, In transit, Delivered) standing at In transit, each with the day it happened or is expected. Under it a Data List holds the tracking number in mono with a Copy Button that really copies it, the estimate, the carrier and the contents. The last band is a Select named "Tell me about this order": every step, out for delivery and delivered, delivered only, or off. Each choice rewrites one sentence to the messages still to come. Guides draw the lines. For shops, couriers and any order that moves through stages.

FAQ

Does choosing a notify option subscribe me?

No. The choice is kept in the page, and the sentence says what you would hear from the moment the page treats as now. Nothing is sent. In your app save the choice per order in choose, and let the same list of messages (MESSAGES) drive both the sentence and what your server sends.

How is the sentence worked out?

Each typed message says which choices send it and whether it has already gone. The sentence counts the ones still to come for the chosen option and names them ("2 messages still to come: out for delivery and delivered. The estimate is Fri 16 Oct."). "Delivered only" gives one, and "Off" says the steps above still update here.

What does the copy button do?

It puts the tracking number on your clipboard and the status line says so ("Copied tracking number PLN 7710 2294 0856."). If the browser refuses, the button reports that it could not copy. The number is made up.

Where do the dates come from?

The four days are typed ISO dates and the page's now is fixed, so the parcel is in transit on Wed 14 Oct with delivery estimated for Fri 16 Oct. In your app fill them from your carrier's events and format them in the viewer's zone.

Is it accessible?

The steps are a list, and each one begins with a hidden word (Done, Now or Expected) so the stage is not colour or position alone. The tracking number has a named copy button, the Select has a name that includes the order, and one polite status line reports each change.

How does it look on a phone?

The four step cells wrap into two rows of two, the facts stack in one column, and the Select goes under its sentence at full width. The sentence reserves its lines, so choosing never moves the page.

All 100 notification blocks