Install with the CLI

Add NPC Dialog Tree to your Roblox project in one command. Requires Node 18+ and a Roblox project — run robloxui init first if you don't have one yet. See the docs.

bashnpx robloxui add npc-dialog-tree

First time? Start with the documentation.

Import

tsx

import { NPC Dialog Tree } from "./src/client/ui/components/npc-dialog-tree";

Usage

tsx

local DialogTree = require(script.Parent.DialogTree)
local tree = DialogTree.new({
  { id = "greet", npcLine = "Need something?", choices = {
    { label = "Tell me about the cave", next = "cave" },
    { label = "Goodbye", next = nil },
  }},
  { id = "cave", npcLine = "It is dangerous.", choices = {
    { label = "I'll be careful", next = nil },
  }},
})

NPC Dialog Tree

TSX + LuauFree

Branching conversation engine. DialogTree holds a graph of nodes (npcLine + choices pointing to next nodes); ConversationView renders the NPC line + choice buttons and advances the cursor. Supports history, reset, and end-of-dialog detection — ideal for quests and shopkeepers.

by RobloxUI Team

View Source

Details

Author	RobloxUI Team
Framework	Roblox-TS + React-Luau
Category	Social
Dependencies	@rbxts/react
Theme Tokens	colors.primary, colors.primaryLight, colors.primaryDark, colors.secondary, colors.secondaryLight, colors.secondaryDark, colors.accent, colors.accentLight, colors.accentDark, colors.bg, colors.bgSecondary, colors.bgTertiary, colors.surface, colors.border, colors.borderLight, colors.glow, colors.text, colors.textPrimary, colors.textSecondary, colors.textMuted, colors.success, colors.successLight, colors.error, colors.errorLight, colors.warning, colors.info, colors.gold, colors.goldLight, gradients.primary, gradients.gold, gradients.health, gradients.mana, gradients.purple, gradients.card, gradients.surface, gradients.surfaceLight, spacing.3xs, spacing.2xs, spacing.xs, spacing.sm, spacing.md, spacing.lg, spacing.xl, radius.sm, radius.md, radius.lg, radius.xl