Countdown
A launch or offer countdown whose digits flip as each second passes.
npm install motion clsx tailwind-merge or npx programmable-cli add countdown
MP4 and GIF exports are for sites that are not on React. Each counts as this month’s download of the component.
What it’s for
- Whole homepage and landing page sections
- Launch and campaign pages
- Feature overviews
How to use it
- Download the file. Countdown.tsx is one self-contained React component. Pick a brand colour above and the file comes in it, where the component has a main colour to replace. Sites not on React can take it as an MP4 or GIF.
- Install what it uses.
npm install motion clsx tailwind-merge, with Tailwind CSS set up in your project. - Drop it in.
import { Countdown } from "./Countdown";then render<Countdown />where you want it.
Want it about your product? Make one like it and the studio builds a version with your features, numbers and brand.
Related components
Problem heroA hero that frames the problem with one big number, a gap to benchmark and a research quote.
Case study timelineA customer's journey as phase cards along a line that fills as you scroll.
How it works stepsSix numbered how-it-works steps fade up in turn as the section scrolls into view.
Feature gridA grid of feature cards with icons fades up in a quick stagger as the section scrolls into view.React + Tailwind CSS. Use downloads in your own sites and products; please don’t resell them as a component library. Repeat downloads of the same component in a month don’t count.