Dialogue Box

Pro

An RPG dialogue box with a speaker tag, a portrait and text that types itself out, line by line.

Kai

Click the box, or press Enter when it has focus

Customize

Chars/sec40

Portrait

Color#ff784f

Installation

Dialogue Box is part of Pro. After purchase you're invited to the private mekai-ui/mekai-ui-pro GitHub repository: copy dialogue-box.tsx into components/ui and run npm install motion.

See Pro pricing

Usage

import { DialogueBox } from "@/components/ui/dialogue-box";

<DialogueBox
  lines={[
    { speaker: "Kai", text: "You made it. The forge has been cold since the storm." },
    { speaker: "Mira", text: "Then let's light it again." },
  ]}
  speed={40}
  onDone={() => setScene("forge")}
/>

Props

6 properties

Property	Type	Default	Description
lines	{ speaker: string; text: string; portrait?: ReactNode }[]	3 sample lines	The conversation, in order.
speed	number	40	Typing speed in characters per second.
portrait	ReactNode	—	Portrait slot content, such as an image. Empty shows a monogram, false hides the slot.
onDone	() => void	—	Called after the last line is dismissed.
color	string	"#ff784f"	Name tag and indicator color.
className	string	—	Extra classes for the box.

Dependencies: motion