8bit Dialogue

Component

About

An 8-bit RPG-style dialogue box pairing a pixel-framed avatar with a retro alert speech bubble, supporting left-aligned player and right-aligned NPC layouts via the player prop.

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

Code

How 8bit Dialogue is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";

import Dialogue from "@/components/ui/8bit-dialogue";

export default function Default() {
  return (
    <div className="flex w-full min-h-screen items-center justify-center bg-background p-8 retro">
      <div className="py-4 flex flex-col gap-4 w-full max-w-[500px]">
        <Dialogue
          avatarSrc="/images/pixelized-8bitcnorc.jpg"
          avatarFallback="Orc"
          title="Orc"
          description="I bring you a gift… it's called AXE TO THE FACE! SLASH!!"
        />
        <div className="flex justify-end">
          <Dialogue
            avatarSrc="/images/goblin.png"
            avatarFallback="Goblin"
            title="Goblin"
            description="`Screeches like a dying flute`"
            player={false}
          />
        </div>
      </div>
    </div>
  );
}