Countdown

npx shadcn@latest add https://ui.saasflare.io/r/countdown.json

pnpm add @saasflare/ui

"use client"import { useMemo } from "react"import { Countdown, useCountdown } from "@saasflare/ui"/** A live countdown to a launch date, driven by the `useCountdown` hook. */export function Demo() {    const target = useMemo(() => Date.now() + 1000 * 60 * 60 * 24 * 9 + 1000 * 60 * 60 * 5, [])    const { days, hours, minutes, seconds } = useCountdown(target)    return <Countdown days={days} hours={hours} minutes={minutes} seconds={seconds} />}

"use client"import { useMemo } from "react"import { Countdown, useCountdown } from "@saasflare/ui"/** A compact countdown with unit labels hidden — fits a promo banner. */export function Demo() {    const target = useMemo(() => Date.now() + 1000 * 60 * 60 * 26 + 1000 * 60 * 42, [])    const { days, hours, minutes, seconds } = useCountdown(target)    return (        <div className="flex flex-col items-center gap-3">            <p className="text-sm text-muted-foreground">Early-bird pricing ends in</p>            <Countdown                days={days}                hours={hours}                minutes={minutes}                seconds={seconds}                showLabels={false}            />        </div>    )}

"use client"import { Countdown } from "@saasflare/ui"/** The presentational component on its own, with fixed values (no ticking). */export function Demo() {    return <Countdown days={3} hours={14} minutes={8} seconds={52} />}