Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Footer blocks

Pro

Time Cells Countdown Footer Block for React

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

  • Pro

    Digest Chooser Newsletter Footer

    Newsletter sign-up

    A newsletter footer for a developer digest: two link groups on one half of a split, and on the other a real sign-up that lets the visitor tick the digests they want, checks the address and confirms in place.

  • Pro

    Call To Action Cell Footer

    Calls to action

    A footer for a workflow tool whose call to action is the last cell of the link grid: a brand and three link groups beside a card in a card with a small flow drawing, a title, one line and a Shine Button.

  • Pro

    Event Countdown Banner

    Countdowns

    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.

  • Pro

    Digit Countdown Banner

    Urgency and limits

    A slim early-pricing band between the page rails, in your theme: the offer at the start, then past a solid divider a live countdown to the end of this month in a small frame beside a Shine Button, with a hairline along the bottom edge that drains as the month runs out.

  • Pro

    Centered Countdown Timer Hero

    Signup and waitlist

    A compact centred launch hero on solid rails with a live countdown as a full-width band of four cells and an email form whose Shine Button shows its loading and success states.

  • Pro

    Minimal Newsletter Footer

    Newsletter sign-up

    A slim newsletter footer for a weekly letter: one centred title and line, a single email field with the Shine Button inside its box, and a legal band, with a real check and a confirmation in place.

All 100 footer blocks