A lightweight, customizable clock and date component for Framer. Choose any global city, switch between 12/24-hour formats, show dates in multiple styles, and fully style the text.
Make it with Workshop
Build your own component with AI
Global City Selection: Choose from hundreds of cities with accurate timezone support.
Real-Time Clock: Automatically updates every second to reflect the current time.
12-Hour / 24-Hour Format: Toggle between clock styles based on your design needs.
AM/PM Casing Control: Choose between AM/PM or am/pm styles.
2-Digit Hour Toggle: Optionally show hours like 03:00 instead of 3:00.
Date Display Options: Show just the time, just the date, or both - all in one component.
Customizable Date Formats: Choose from multiple date formats.
Typography Controls: Use your own fonts, set the size, weight, letter spacing, and color.
Layout-Ready: No built-in background or padding, easily fits into any layout or container.