---
title: "PublishedDate — Free Framer component · Best of Framer"
description: "Free Framer component · by Sadiq Abdulqudus · Interactive. PublishedDate Component Display relative timestamps like “5 hours ago”, “2 weeks ago”, or “3 months ago” just like YouTube’s posted dates."
canonical: "https://framer.elliotli.dev/component/publisheddate"
---

[Home](/)/[Components](/components)/[Interactive](/components/category/interactive)/PublishedDate

# PublishedDate

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

![PublishedDate preview image 1](https://framer.elliotli.dev/og/component/publisheddate/dbd3f42186669baf/1600x1200.jpg)

## Summary

PublishedDate Component Display relative timestamps like “5 hours ago”, “2 weeks ago”, or “3 months ago” just like YouTube’s posted dates.

## Description

**PublishedDate Component**

Display relative timestamps like “5 hours ago”, “2 weeks ago”, or “3 months ago” just like YouTube’s posted dates. Perfect for blogs, video platforms, news sites, and apps that need dynamic date display.

The **Time Ago Component** brings YouTube-style date functionality to your Framer projects. Instead of showing static dates, it automatically calculates and displays relative time (e.g. “posted 5 hours ago” or “published 2 months ago”).

This component updates seamlessly based on the current time, making your projects feel **modern, dynamic, and user-friendly**. Whether you’re building a content platform, blog, news portal, or social app, this component keeps your UI fresh and engaging without manual updates.

## Key Features

-   🔄 **Automatic relative time calculation** — no manual updates needed.
    
-   ⏰ **Multiple time ranges supported** — minutes, hours, days, weeks, months, years.
    
-   🧠 **Smart plural handling** — “1 day ago” vs. “2 days ago.”
    
-   🎨 **Lightweight design** — styled to look simple and readable like YouTube.
    
-   🔌 **Reusable** — just pass a publishedDate property, and it works instantly.
    
-   🛠 **Customizable** — easily style fonts, colors, and placement to match your brand.
    

## 💡 Use Cases

-   📺 **Video platforms** — show when a video was posted (YouTube-like).
    
-   📰 **Blogs & News sites** — keep readers updated with “Published 3 hours ago.”
    
-   📱 **Social media apps** — display user post timestamps dynamically.
    
-   🛒 **E-commerce product updates** — “Added 2 weeks ago” or “Back in stock 3 days ago.”
    
-   🎤 **Podcasts or event listings** — “Episode uploaded 1 month ago.”
    

## Why This Component?

Instead of showing boring, static dates, give your users **human-friendly, real-time posted dates** that create trust and urgency. People love knowing how “fresh” content is, this simple feature boosts engagement across blogs, apps, and platforms.

## 🔧 Technical Details

-   Input: **publishedDate (Date format)**
    
-   Output: **Text displaying relative time**
    
-   Updates automatically on reload/visit
    
-   Built for **Framer**, no external dependencies
    

## 📦 What’s Included

-   The **Time Ago Component**
    
-   Lifetime updates
    

## 🎯 Applications

-   Content creators who want their websites to feel like YouTube/Twitter.
    
-   Agencies building blogs, video sites, or social platforms for clients.
    
-   E-commerce brands wanting fresher UI with relative product timestamps.
    
-   Developers/designers who want a ready-made drop-in solution.
    

✨ With this component, your projects feel **alive, modern, and always up to date**, just like the big platforms people love.

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

-   All · #7353

## Details

- **Author**: Sadiq Abdulqudus
- **Published**: 2025-09-18
- **Updated**: 2025-09-17
- **Added**: 2025-09-09
- **Categories**: Interactive

## More like this

-   [Velvet Curtain](/component/velvet-curtain) — Sarthak Prakash · $12 — Cinematic curtain reveal effect
-   [Image-Compare Slider](/component/image-compare-slider) — Studio Digital · Free — Reveal what changed, beautifully
-   [Lesson Packages](/component/lesson-packages) — Shelfless Studio · $9 — Lesson bundles with savings shown
-   [Deskbell AI Chatbot](/component/deskbell-ai-chatbot) — NS. Studio · Free — AI site chat, works with Chatbase