Components
Loading preview...
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.
@reapollo
npx shadcn@latest add https://21st.dev/r/larsen66/8bit-dialogue"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>
);
}