NewAI SDK Agents

Pixel Paragraph

PreviousNext

Paragraph where specific words render in a pixel font while the rest of the text stays in the normal typeface.

54+ animated components and effects. Free, open source, and built to drop into any shadcn/ui project.

Paragraph Text
Pixel Words (comma-separated)

These words render in a pixel font while the rest stays in the normal typeface

Pixel Font
Wrapper Element

Installation

pnpm dlx shadcn@latest add https://cult-ui.com/r/pixel-paragraph-words.json

Font Setup

This component requires the Geist Pixel fonts. Follow these steps to configure them in your project.

1. Register font variables in your root layout

Import the pixel font variants from geist/font/pixel and apply their CSS variable classes to <body>:

app/layout.tsx
import { GeistSans } from "geist/font/sans"
import { GeistMono } from "geist/font/mono"
import {
  GeistPixelSquare,
  GeistPixelGrid,
  GeistPixelCircle,
  GeistPixelTriangle,
  GeistPixelLine,
} from "geist/font/pixel"
 
export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body
        className={`${GeistSans.variable} ${GeistMono.variable} ${GeistPixelSquare.variable} ${GeistPixelGrid.variable} ${GeistPixelCircle.variable} ${GeistPixelTriangle.variable} ${GeistPixelLine.variable}`}
      >
        {children}
      </body>
    </html>
  )
}

2. Map CSS variables in your Tailwind CSS theme

globals.css (Tailwind v4)
@theme {
  --font-sans: var(--font-geist-sans);
  --font-mono: var(--font-geist-mono);
  --font-pixel-square: var(--font-geist-pixel-square);
  --font-pixel-grid: var(--font-geist-pixel-grid);
  --font-pixel-circle: var(--font-geist-pixel-circle);
  --font-pixel-triangle: var(--font-geist-pixel-triangle);
  --font-pixel-line: var(--font-geist-pixel-line);
}

For Tailwind v3, use the extend key in tailwind.config.ts:

tailwind.config.ts (Tailwind v3)
export default {
  theme: {
    extend: {
      fontFamily: {
        sans: ["var(--font-geist-sans)"],
        mono: ["var(--font-geist-mono)"],
        "pixel-square": ["var(--font-geist-pixel-square)"],
        "pixel-grid": ["var(--font-geist-pixel-grid)"],
        "pixel-circle": ["var(--font-geist-pixel-circle)"],
        "pixel-triangle": ["var(--font-geist-pixel-triangle)"],
        "pixel-line": ["var(--font-geist-pixel-line)"],
      },
    },
  },
}

Usage

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

Basic

Highlight specific words in a pixel font:

<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-lg text-muted-foreground"
/>

Different Pixel Fonts

Choose any of the five pixel font variants:

<PixelParagraph
  text="Triangle-based pixel typography with highlighted words."
  pixelWords={["Triangle-based", "highlighted"]}
  font="triangle"
  className="text-lg"
/>

Styling Pixel Words

Apply custom classes to the pixel words:

<PixelParagraph
  text="Important words stand out from the base text."
  pixelWords={["Important", "stand out"]}
  font="grid"
  pixelWordClassName="text-foreground font-semibold"
  className="text-lg text-muted-foreground"
/>

As a Different Element

Render as a <span> or <div> instead of <p>:

<PixelParagraph
  as="div"
  text="Block-level pixel text with highlighted words."
  pixelWords={["highlighted words"]}
  className="text-sm"
/>

API Reference

PixelParagraph Props

PropTypeDefaultDescription
textstring—The paragraph text to render
pixelWordsstring[][]Words/phrases to render in a pixel font. Matching is case-sensitive, longest-first
as"p" | "span" | "div""p"The wrapper element to render
font"square" | "grid" | "circle" | "triangle" | "line""square"The pixel font for highlighted words
pixelWordClassNamestring—Extra className applied to each pixel-word span
classNamestring—Additional CSS classes applied to the wrapper element

Available Pixel Fonts

Font NameTailwind ClassCSS Variable
squarefont-pixel-square--font-geist-pixel-square
gridfont-pixel-grid--font-geist-pixel-grid
circlefont-pixel-circle--font-geist-pixel-circle
trianglefont-pixel-triangle--font-geist-pixel-triangle
linefont-pixel-line--font-geist-pixel-line

How It Works

  1. The text string is split into alternating segments: plain (normal font) and pixel (highlighted words)
  2. Plain segments render as standard <span> elements in the inherited font
  3. Pixel segments render as <span> elements with the chosen pixel font class applied
  4. Matching is longest-first — if pixelWords contains both "ui" and "shadcn/ui", the longer phrase takes priority
  5. Matching is case-sensitive — "React" will not match "react"

Features

  • Static font assignment — pixel words get the chosen font, no hover/cycling complexity
  • Five pixel font variants — Square, Grid, Circle, Triangle, and Line
  • Longest-match-first — multi-word phrases match correctly without partial collisions
  • Server-compatible — no "use client" needed, no state or effects
  • Composable — renders as <p>, <span>, or <div> with full className support

Pixel Paragraph vs Pixel Paragraph Inverse

FeaturePixel ParagraphPixel Paragraph Inverse
Base textNormal font (sans)Pixel font
Highlighted wordsPixel fontSans/mono font
Best forAccenting key words in normal body textFull pixel paragraphs with readable escapes