---
title: "World Date — Free Framer component · Best of Framer"
description: "Free Framer component · by Soyeb · Text. Screenshots, details, and remix links on Best of Framer."
canonical: "https://framer.elliotli.dev/component/world-date"
---

[Home](/)/[Components](/components)/[Text](/components/category/text)/World Date

# World Date

Live city dates in any format, anywhere

[View on Framer](https://framer.com/marketplace/components/world-date/?via=elliot-li)

![World Date preview image 1](https://framer.elliotli.dev/og/component/world-date/c10866bbaa6ee95e/1600x1200.jpg)

## Summary

World Date solves that.

## Description

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.

## What makes this different

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
    

## Instructions

-   Copy and paste the **World Date** component into your Framer project
    
-   Select the component and open the right-hand panel
    

### \- Date Setup

-   Choose any city or timezone
    
-   Or select **Current Location** to auto-detect the visitor’s timezone
    

### \- Custom Formatting

-   Enable **Custom Format**
    
-   Write your format using date tokens(e.g. D, d M Y → Sat, 18 Apr 2026)
    

### \- City Label

-   Show or hide the city name
    
-   Replace it with custom text (e.g. “NYC”, “Tokyo”)
    

### \- Layout

-   Choose horizontal or vertical layout
    
-   Align left, center, or right
    
-   Add optional divider
    

### \- Styling

-   Customize fonts, sizes, and colors independently for:
    
    -   Date
        
    -   Label
        

### \- Fluid Typography (Optional)

-   Enable fluid font size
    
-   Text scales smoothly between screen sizes using CSS clamp()
    

## How It Works

The component includes 7 control groups for full flexibility.

### Properties Control

![World Date Framer Component Controller](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-7ehajf8h-cPzwHuA4Bt5irfy7FLjnQmwnM84BBG)World Date Framer Component Controller

-   **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.
    

## Features

-   **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.
    

## Use Cases

-   **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**](https://framer.link/market)

© 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](mailto:heysoyebali@gmail.com)

## Rank history [How rankings work →](/terms#rankings)

-   All · #4822

## Details

- **Author**: Soyeb
- **Published**: 2026-04-27
- **Updated**: 2026-04-27
- **Added**: 2026-03-18
- **Categories**: Text

## More like this

-   [Text Reveal Effect](/component/text-reveal-effect) — Lera · $4 — Text reveal effect over "ghost" layer.
-   [Soft Heading](/component/soft-heading) — Kaisa A · Free — Animated Soft Heading in 2 colors
-   [Curved Text Marquee](/component/curved-text-marquee) — Ahmet Loca · Free — Animated Bend
-   [Type Write Effect](/component/type-write-effect) — Russet Supply · Free — Animated Text & Interactive Typing