Word Count Badge

Live word count + reading time pill.

Free · Editor

This Pro block's preview & source unlock with the library.

Install

terminal

npx shadcn@latest add https://blocks.aiskillhub.info/api/registry/word-count-badge

Source

components/docblocks/word-count-badge.tsx

"use client";
export function WordCountBadge({ text }: { text: string }) {
  const words = text.trim() ? text.trim().split(/\s+/).length : 0;
  const mins = Math.max(1, Math.round(words / 200));
  return (
    <span className="inline-flex items-center gap-2 rounded-full border border-border bg-surface px-3 py-1 text-xs text-muted">
      <span>{words} words</span>
      <span className="h-1 w-1 rounded-full bg-border" />
      <span>{mins} min read</span>
    </span>
  );
}