Seven-Segment ClockA retro 7-segment LCD clock with pixel-grid overlay.
Add to your project
One command adds this component to your project.
Run the following command. New project? Run npx shadcn@latest init first to set up Tailwind and path aliases.
npx shadcn@latest add @aicanvas/neon-clockFor dark mode, add the dark class to your <html> element:
<html class="dark">Install with AI Canvas MCP
With AI Canvas MCP, your AI knows every component we ship. Ask for one inside Claude Code, Codex, or Cursor and it installs the component you pick. Works with any AI Canvas account, free or premium.
About Seven-Segment Clock
Seven-Segment Clock is a retro clock whose digits are drawn as SVG polygons, one shape per segment, with a faint pixel-grid overlay that gives them a real vintage-display feel. It shows live hours, minutes, and seconds with a blinking colon, plus AM/PM, a row for the day of the week, and the full date underneath. Because there is no external font and no canvas to repaint, the whole thing renders instantly and styles cleanly with Tailwind. It is a strong fit for retro game UI, terminal-themed dashboards, or portfolio sites leaning on a nostalgic palette.
Built with
Frequently asked questions
- Is Seven-Segment Clock free to use?
- Yes. Seven-Segment Clock is part of the free AI Canvas library and is open source under the MIT license, so you can use it in personal and commercial projects.
- How do I install Seven-Segment Clock?
- One command: npx shadcn@latest add https://aicanvas.me/r/neon-clock.json, free with a free AI Canvas account. Or connect the AI Canvas MCP server and ask your AI editor to install Seven-Segment Clock for you. You can also copy the source straight from the Code tab, no account needed. It works in any React project with Tailwind CSS.
- What is Seven-Segment Clock built with?
- Seven-Segment Clock is built with React and TypeScript, using Tailwind CSS.
- Where would I use Seven-Segment Clock?
- Common uses include Dashboard, Game UI, and Portfolio. Like every AI Canvas component, it is self-contained and drops into any React project.
- Can I remix Seven-Segment Clock with AI?
- Yes. Seven-Segment Clock ships with expert prompts for Claude Code, Lovable, and V0, so you can recreate and customize it in your AI builder of choice.
AI Canvas