Pixel Paragraph Words

Text

About

A paragraph that renders selected words or phrases in a retro pixel font while the rest of the text stays in the normal typeface.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Pixel Paragraph Words to your project and fits it to your theme.

Code

How Pixel Paragraph Words is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";

import { PixelParagraph } from "@/components/ui/pixel-paragraph-words";

/* ─── Showcase ─── */

export default function PixelParagraphWordsDemo() {
  return (
    <div className="mx-auto w-full max-w-2xl space-y-8 px-6 py-10">
      <PixelParagraph
        text="54+ animated components and effects. Free, open source, and built to drop into any shadcn/ui project."
        pixelWords={["animated", "shadcn/ui"]}
        font="square"
        className="text-2xl leading-relaxed text-muted-foreground"
        pixelWordClassName="text-foreground"
      />

      <PixelParagraph
        text="Highlight the keywords that matter and let them pop in a crisp pixel typeface."
        pixelWords={["keywords", "pixel"]}
        font="grid"
        className="text-xl leading-relaxed text-muted-foreground"
        pixelWordClassName="text-foreground"
      />

      <PixelParagraph
        text="Mix a retro circle grid with modern copy for playful, on-brand emphasis."
        pixelWords={["retro", "circle"]}
        font="circle"
        className="text-xl leading-relaxed text-muted-foreground"
        pixelWordClassName="text-foreground"
      />

      <PixelParagraph
        text="Triangle and line variants give every word its own distinct texture."
        pixelWords={["Triangle", "line"]}
        font="triangle"
        className="text-xl leading-relaxed text-muted-foreground"
        pixelWordClassName="text-foreground"
      />
    </div>
  );
}