---
title: "Time To Read"
canonical_url: "https://framerhub.io/components/time-to-read"
last_updated: "2026-06-15T14:46:32.031Z"
---

## Time To Read

Add a helpful "Read time: 5 min" label to your blog posts automatically. This component scans your page content and calculates the estimated reading time based on a customizable WPM speed.

## Features

**Automatic Word Count**
Just drop it on your CMS page. It automatically counts the words in the document body and converts them to minutes.

**Custom Reading Speed**
Adjust the Words Per Minute (WPM) to match your audience's reading pace. Default is 200 WPM.

**Fully Customizable Labels**
Change the prefix and suffix text to match your design style (e.g., "Read time:", "5 min read", "Estimated: 3 minutes").

**Zero-Config Setup**
Works out of the box with no additional configuration required.

## Use Cases

**Blog Posts** — Display estimated reading time on article pages to set reader expectations.

**Documentation** — Help users gauge the length of tutorials and guides.

**News Sites** — Show quick-read indicators for different article lengths.

![Time To Read Preview](/framerhub/img/components/control/time-to-read.jpg)

## How to Use

### Installation

**VIDEO PLACEHOLDER: Installation Tutorial**

1. Log in to your account at framerhub.io
2. Navigate to framerhub.io/dashboard
3. Find Time To Read in your Recent Purchases
4. Click the "Copy" button
5. Open your Framer project
6. Paste the component anywhere on your canvas (Cmd/Ctrl + V)

### Customization

**Config Section**

- WPM: Set your preferred words per minute (1-1000)
- Prefix: Text before the number (e.g., "Read time:")
- Suffix: Text after the number (e.g., "min")

**Container Section**

- Padding: Inner spacing
- Background Color: Container background
- Border Radius: Corner rounding
- Border: Width, style, and color
- Shadow: Box shadow effect

**Text Styles Section**

- Font: Full typography controls
- Color: Text color

### Quick Tips

**Best Placement** — Position the component near your article title or byline for maximum visibility.

**Reading Speed** — 200 WPM is average. Use 150 WPM for technical content, 250 WPM for casual reading.

**Minimal Styling** — The component works great with transparent background, letting it blend with your existing design.

## License

**Single Use License** — Use in one client project with full commercial rights. No redistribution. 1 license = 1 client.

## Refund Policy

Due to the nature of our digital products, we are unable to offer refunds, but we're here to assist you with any questions or concerns!

## Why Designers Love This

Set it and forget it. This simple utility component adds professional polish to any blog or content-heavy site, giving your readers a helpful estimate before they dive in.

---