CountdownAndroid

Live countdown with per-digit tick animation, compact and labeled-block layouts, completion haptic.

$ npx lumioui add countdown

import { Countdown } from "@/components/ui/countdown/countdown";

Props7

to	Date \| number	Target time — epoch ms or Date. The display clamps at zero.
format?	"auto" \| "dhms" \| "ms"	Which units to render. "auto" (default) drops leading zero units — under an hour you get MM:SS, over a day DD:HH:MM:SS. "dhms" always shows all four, "ms" forces MM:SS.
compact?	boolean	Compact "2d 4h 12m" text instead of the colon clock. Inline layout only.
layout?	"inline" \| "blocks"	"blocks" renders each unit as a labeled card; default "inline" clock.
onComplete?	() => void	Fires once when the countdown reaches zero.
textClassName?	string	Text classes for the digits.
className?	string

Countdown — Blocksblocks.tsx

countdown/variants/blocks.tsx open

Live countdown with per-digit tick animation, compact and labeled-block layouts, completion haptic.

import { CountdownBlocks } from "@/components/ui/countdown/variants/blocks";

export function Example() {
  return (
    <CountdownBlocks />
  );
}

import * as React from "react";
import { View } from "react-native";
import { Countdown } from "../countdown";
import { Badge } from "../../badge/badge";
import { Button } from "../../button/button";
import { Text } from "../../text/text";
import { Glass } from "../../glass/glass";

/** CountdownBlocks — drop countdown as labeled digit cards inside a launch card. */
export function CountdownBlocks() {
  const [target] = React.useState(
    () => Date.now() + 2 * 86400 * 1000 + 7 * 3600 * 1000 + 45 * 60 * 1000 + 12 * 1000
  );
  return (
    <View className="w-full gap-3">
        <Glass interactive curvature="edge" className="w-full gap-3 rounded-2xl p-4">
          <View className="flex-row items-center justify-between">
            <Text className="text-sm font-semibold text-foreground">Aurora Drop 04</Text>
            <Badge variant="glass">Members</Badge>
          </View>
          <Countdown
            to={target}
            format="dhms"
            layout="blocks"
            textClassName="text-xl"
          />
          <Text variant="muted" className="text-center text-xs">Members get 15 min early access</Text>
          <Button size="sm" variant="glass">Remind me</Button>
        </Glass>
      </View>
  );
}

Countdown — Compactcompact.tsx

countdown/variants/compact.tsx open

Live countdown with per-digit tick animation, compact and labeled-block layouts, completion haptic.

import { CountdownCompact } from "@/components/ui/countdown/variants/compact";

export function Example() {
  return (
    <CountdownCompact />
  );
}

import * as React from "react";
import { View } from "react-native";
import { Countdown } from "../countdown";
import { Text } from "../../text/text";
import { Glass } from "../../glass/glass";

/** CountdownCompact — flash-sale pill with the short "4h 12m" format. */
export function CountdownCompact() {
  const [target] = React.useState(() => Date.now() + 4 * 3600 * 1000 + 12 * 60 * 1000 + 30 * 1000);
  return (
    <View className="w-full gap-3">
        <Glass interactive
          curvature="edge"
          className="w-full flex-row items-center justify-between rounded-full py-2 pl-4 pr-2"
        >
          <Text className="text-sm font-medium text-foreground">Flash sale ends</Text>
          <View className="rounded-full bg-destructive px-3 py-1">
            <Countdown
              to={target}
              compact
              textClassName="text-xs font-bold text-destructive-foreground"
            />
          </View>
        </Glass>
      </View>
  );
}