Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Banner blocks

Pro

Event Countdown Banner Block for Ark UI

An event countdown for a developer conference: a calendar tile with the name and a sentence saying when it starts, four cells of days, hours, minutes and seconds in a corner-marked frame, and a Shine Button to reserve a seat.

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

An event countdown banner for React with Ark UI, for a conference, a webinar or a launch stream. Between the page's rails sit three parts: a calendar tile with the event's name and a sentence that says when it starts ("Starts in 2 days 4 hours"), a small frame with + marks on its corners holding four cells (days, hours, minutes, seconds) split by hairlines, and an outline Shine Button, Reserve a seat. When the clock reaches zero the sentence turns into "Live now" with a status dot and the button into Join the stream. The page's rails and top rule come from the Guides spine, so the strip lines up between a header and a hero. It's built from Timer, Guides, Status and Shine Button, with CSS transitions for the entrance and your theme's tokens for every colour. For conferences, webinar reminders, ticket deadlines and any date where the time left is the message.

FAQ

Where does the clock count to?

It counts a length of time, STARTS_IN_MS at the top of the file (2 days, 4 hours and 12 minutes), and starts when the browser has rendered the page. The server draws dashes in the cells, so the server's and the browser's first render agree and nothing goes stale in a cached page. For a real event, replace the constant with the date minus now, and work it out in the effect that starts the clock, never during render: Date.parse("…") - Date.now().

What does a screen reader hear?

The sentence, not the digits. "Starts in 2 days 4 hours" is ordinary text that changes by the hour (by the minute on the last day), and the four cells are hidden from assistive technology because they repeat it. A ticking number would either stay silent or be read out every second. The one live part is a polite status line that speaks when the event goes live.

What happens at zero?

The sentence becomes "Live now. The keynote has started." with a green status dot, the status line announces "Vesperpath Live is on now.", the cells rest on zeros, and the button's label changes from Reserve a seat to Join the stream. It's the same link, so point both at the pages you need by changing the label and href together.

Where does the button go?

Reserve a seat is a link (href="#"): point it at your registration page. It's an outline Shine Button, small, so it stays quieter than the page's main call to action; a band of light sweeps across it once on hover and keyboard focus. It takes asChild with the link inside, so it can be your router's link.

What moves, and what happens with reduced motion?

The strip fades up once when the page loads, and the digits change in place each second without animating. With reduced motion the entrance is off and the seconds cell is hidden, so the clock moves by the minute instead of changing every second.

How does it fit on a phone?

The tile and the text come first, the four cells follow at full width, each taking a quarter, and the button sits under them at the start. At 320 pixels nothing scrolls sideways. The digits keep their order in a right-to-left layout, and the rest mirrors.

All 100 banner blocks