Most websites treat dates as static text - hardcoded, outdated, or inconsistent across regions.
But real products need dynamic, location-aware date display.
World Date solves that.
It’s a flexible date component that lets you show live, timezone-aware dates for any city - fully formatted, styled, and responsive.
Whether you need a simple city date, a formatted event date, or a location-based display, everything works out of the box.
No JavaScript. No manual updates. Just drop it in and your live date always stays accurate.
Unlike basic world clock or date widgets, this component is built for design flexibility - not just functionality.
You’re not locked into a fixed format or layout.
Write your own custom date format using date tokens
Style date and label independently
Use fluid typography that scales across devices
Show any timezone date or the visitor’s location date automatically
Copy and paste the World Date component into your Framer project
Select the component and open the right-hand panel
Choose any city or timezone
Or select Current Location to auto-detect the visitor’s timezone
Enable Custom Format
Write your format using date tokens(e.g. D, d M Y → Sat, 18 Apr 2026)
Show or hide the city name
Replace it with custom text (e.g. “NYC”, “Tokyo”)
Choose horizontal or vertical layout
Align left, center, or right
Add optional divider
Customize fonts, sizes, and colors independently for:
Date
Label
Enable fluid font size
Text scales smoothly between screen sizes using CSS clamp()
The component includes 7 control groups for full flexibility.
Date Settings: Pick the timezone and optionally define a custom date format using tokens.
City Label: Control visibility or replace with custom text.
Layout: Adjust direction, alignment, spacing, and divider styling.
Date Style: Full typography control for the date text.
Label Style: Independent styling for the city label.
Fluid Date Size: Enable responsive scaling for the date using clamp-based sizing.
Fluid Label Size: Apply the same fluid behavior to the label text.
Global timezone support: Supports 70+ cities and timezones worldwide.
Auto location detection: Displays the visitor's local location date automatically.
Custom date formatting: Flexible date formatter with multiple tokens.
Fluid responsive typography: Built-in scaling using CSS clamp() for modern adaptive text.
Independent styling: Control date and label styles separately.
Flexible layouts: Horizontal or vertical arrangement with alignment control.
Custom labels & dividers: Replace city names or add separators for cleaner UI.
SSR safe rendering: Prevents hydration issues on Framer’s server-rendered pages.
Zero dependencies: Built with pure React and Framer APIs.
Agency & portfolio sites: Show your studio's current city date alongside projects.
Multi-office companies: Display multiple timezone dates for global teams.
Event pages: Format event dates exactly as designed.
Travel & booking sites: Show destination location dates dynamically.
Editorial & news: Create styled datelines with city + live date.
Dashboards: Display real-time dates with full typographic control.
Personal portfolios: “Currently in Tokyo · Sunday, 19 April 2026” style layouts.
Made with ❤️ by Soyeb
© 2026 Soyeb. All rights reserved.
Refund Policy: Due to the digital nature of these components, all sales are final, and once delivered they cannot be returned or refunded. Please review product details and demos before purchasing, and feel free to reach out if anything is unclear.
Have questions or need a custom Framer component? Reach out at heysoyebali@gmail.com
Soyeb
