Digital Clock

New

A retro 7-segment LED digital clock built with CSS gradients. Features customizable colors, optional seconds display, and scalable size.

Preview

npm

pnpm

yarn

bun

npx shadcn@latest add @gooseui/digital-clock

import { DigitalClock } from "@/components/ui/digital-clock"

export default function Example() {
  return <DigitalClock />
}

<DigitalClock showSeconds={false} />

<DigitalClock color="#00BFFF" />
<DigitalClock color="#FF6B6B" />
<DigitalClock color="#FFD93D" />

<DigitalClock use24Hour={false} />

<DigitalClock scale={0.3} />
<DigitalClock scale={0.5} />
<DigitalClock scale={0.7} />

Prop	Type	Default	Description
showSeconds	boolean	true	Show seconds digits
use24Hour	boolean	true	24-hour format
color	string	#82FA58	LED segment color
scale	number	1	Size scale factor
className	string	-	Additional classes