TalentTree

The facade component from @real-life-talent-tree/ui. Renders a complete talent tree: all paths, talent nodes, pip indicators, and a click-to-expand popup.

Import

import { TalentTree } from '@real-life-talent-tree/ui'
import '@real-life-talent-tree/ui/styles.css'

Props

Prop	Type	Required	Default	Description
tree	TalentTree	Yes	—	Domain object from @real-life-talent-tree/core. Contains all paths and talents.
hint	string	No	'💬 Click on a talent to learn more'	Text shown in the corner hint button. Pass an empty string to hide it.

The TalentTree type

// from @real-life-talent-tree/core
interface TalentTree {
  id: string
  title: string
  slug: string
  isPublic: boolean
  publishedAt?: Date
  createdAt: Date
  updatedAt: Date
  theme: { background?: string; textColor?: string }
  paths: TalentPath[]
}

interface TalentPath {
  id: string
  name: string
  displayOrder: number
  talents: Talent[]
}

interface Talent {
  id: string
  name: string
  level: 1 | 2 | 3 | 4 | 5 // 1 = Aware … 5 = Expert
  iconUrl?: string
  description?: string
  displayOrder: number
}

Example

import { TalentTree } from '@real-life-talent-tree/ui'
import '@real-life-talent-tree/ui/styles.css'

// tree comes from the platform API or a TalentTreeBuilder instance
export default function MyPage({ tree }) {
  return <TalentTree tree={tree} hint="Click a node to expand" />
}