blurrow/ui
editorial

reading time

roughly how long an article takes to read.

8 min read

installation

new to blurrow? this sets up your project in one go: the package, the styles and the font. already done it? skip straight to usage. the installation page has the details.

bash
npx @blurrow/ui init
›rather own the code? copy the source instead

let the cli copy it, along with anything it needs:

bash
npx @blurrow/ui add reading-time

or by hand: drop this file into components/ui and import from there.

components/ui/ReadingTime.tsxtsx
import React from "react";


interface ReadingTimeProps {
  minutes: number;
  className?: string;
}


export function ReadingTime({ minutes, className = "" }: ReadingTimeProps) {
  return (
    <span
      className={[
        "inline-flex items-center gap-1.5 text-[12px] font-medium text-neutral-500",
        className,
      ]
        .filter(Boolean)
        .join(" ")}
    >
      <svg
        width="13"
        height="13"
        viewBox="0 0 24 24"
        fill="none"
        stroke="currentColor"
        strokeWidth="2"
        strokeLinecap="round"
        strokeLinejoin="round"
        className="text-neutral-400"
      >
        <circle cx="12" cy="12" r="10" />
        <polyline points="12 6 12 12 16 14" />
      </svg>
      {minutes} min read
    </span>
  );
}

usage

tsx
import { ReadingTime } from "@blurrow/ui";
tsx
<ReadingTime minutes={8} />

props

straight from the source, so they're always up to date.

propsts
interface ReadingTimeProps {
  minutes: number;
  className?: string;
}
previous←reading progressnextreaction bar→