Pixel Paragraph Inverse

Paragraph rendered in a pixel font where specific words escape into a sans or mono font.

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

Paragraph Text

Plain Words (comma-separated)

These words escape the pixel font and render in sans/mono

Pixel Font (base text)

Plain Font (escaped words)

Wrapper Element

Installation


pnpm dlx shadcn@latest add https://cult-ui.com/r/pixel-paragraph-words-inverse.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 { PixelParagraphInverse } from "@/components/ui/pixel-paragraph-words-inverse"

Basic

Base text in pixel, specific words escape to sans:


<PixelParagraphInverse
  text="54+ animated components and effects. Free, open source, and built to drop into any shadcn/ui project."
  plainWords={["animated", "shadcn/ui"]}
  plainFont="sans"
  pixelFont="square"
  className="text-lg text-muted-foreground"
/>

Mono Escape

Use mono instead of sans for the escaped words:


<PixelParagraphInverse
  text="Build beautiful interfaces with pixel-perfect typography."
  plainWords={["beautiful", "pixel-perfect"]}
  plainFont="mono"
  className="text-lg text-muted-foreground"
/>

Different Pixel Fonts

Change the base pixel font:


<PixelParagraphInverse
  text="Grid-based pixel typography with highlighted words."
  plainWords={["highlighted"]}
  pixelFont="grid"
  plainFont="sans"
  className="text-lg"
/>

Styling Plain Words

Apply custom classes to the escaped words:


<PixelParagraphInverse
  text="Important words can be visually distinct from the base text."
  plainWords={["Important", "visually distinct"]}
  plainFont="sans"
  plainWordClassName="text-foreground font-semibold"
  className="text-lg text-muted-foreground"
/>

As a Different Element

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


<PixelParagraphInverse
  as="span"
  text="Inline pixel text with plain escapes."
  plainWords={["plain escapes"]}
  className="text-sm"
/>

API Reference