// Data Display

Timer

Countdown or stopwatch with controls.

// Rendering preview…

// Install

npx shadcn@latest add @dakik/timer

// Usage

1import { Timer, TimerArea, TimerItemGroup, TimerItem } from "@/components/ui/timer";
2
3<Timer />

// Code

1"use client";
2
3import { ark } from "@ark-ui/react/factory";
4import {
5  Timer as ArkTimer,
6  useTimerContext as useArkTimer,
7} from "@ark-ui/react/timer";
8import type React from "react";
9import { cn } from "@/lib/utils";
10
11export const useTimer = useArkTimer;
12
13export const remainingMsUntilDate = (date: Date): number => {
14  const end = new Date(date).getTime();
15
16  return Math.max(0, end - Date.now());
17};
18
19export const Timer = (props: React.ComponentProps<typeof ArkTimer.Root>) => {
20  const { className, ...rest } = props;
21
22  return (
23    <ArkTimer.Root
24      className={cn(
25        "min-w-0",
26        "flex flex-col items-start gap-4",
27        "text-foreground",
28        className

// Dependencies

@ark-ui/react