Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Footer blocks

Pro

Time Cells Countdown Footer Block for Radix UI

A launch footer for a synthesizer maker with four big time cells (days, hours, minutes, seconds) on shared hairlines, a notify form at the end and two link groups under them.

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 footer for React with Radix UI that counts down to a launch. The first band is split: at the start, the title "Tarn 8 pre-orders open in" over four big time cells (days, hours, minutes and seconds) on shared hairlines in a frame with + marks on its corners, two by two on a phone; at the end, a notify form with one email field that holds the Shine Button "Notify me". The form checks the address, keeps focus on its problem, and a good address turns it into "Saved in this demo": nothing is sent. Under the first band, a split row holds the wordmark and two link groups in a nav labelled Footer, then the legal band closes the page. The clock starts when the page does and counts down from a fixed length, so it never shows a past date. At zero the title changes and the form gives way to a "Pre-order" link.

FAQ

How do I point the clock at my launch?

Set OPENS_IN_MS, the time remaining when the page opens, in milliseconds. The clock counts down from that length once the page is running, and the server renders the same starting numbers, so there is nothing to mismatch. For a fixed launch date, work the difference out when the page renders and pass it in, or swap the timer for the catalog's Countdown Text with a target date.

How does the countdown read to a screen reader?

The digits are hidden from assistive technology, because they change every second. The title carries the time in words ("11 days 6 hours"), which changes by the hour, and nothing is announced until the pre-orders open.

What happens with reduced motion?

The seconds cell is left out and the other three cells take the width, so the clock moves by the minute instead of the second.

Does the notify form send anything?

No. It validates the address, waits a moment and shows a confirmation that says it was saved in this demo. Replace the simulated wait in submit with a call to your mailing-list provider.

How does it fit on a phone?

The title comes first, then the four cells two by two, then the form under a rule; the brand and the two link groups follow, then the legal row. At 320 pixels each cell is half the width and the numbers stay on one line.

Where does the copyright year come from?

It is the current year, read when the footer renders, so it never goes stale. On a server-rendered site the year is the one in force when the page was rendered.

All 100 footer blocks