React (npm)

Use @real-life-talent-tree/ui to render a talent tree directly in your React application with full control over data fetching and styling.

Installation

npm install @real-life-talent-tree/ui @real-life-talent-tree/core

Import the component stylesheet once in your app. Where you put it depends on your framework:

• Next.js App Router — add to app/layout.tsx (root layout only; CSS imports are not allowed in Client Components)
• Next.js Pages Router — add to pages/_app.tsx
• Vite / CRA — add to main.tsx or App.tsx

import '@real-life-talent-tree/ui/styles.css'

Fetching tree data

Fetch from the platform's public API. No authentication is required for published trees:

GET https://api.reallifetalenttree.com/api/v1/public/{username}/{slug}

The response is wrapped in a { data } envelope — unwrap it before passing to the component:

import type { TalentTree } from '@real-life-talent-tree/core'

async function fetchTree(username: string, slug: string): Promise<TalentTree> {
  const res = await fetch(`https://api.reallifetalenttree.com/api/v1/public/${username}/${slug}`)
  if (!res.ok) throw new Error('Tree not found')
  const { data } = await res.json() // ← unwrap the envelope
  return data as TalentTree
}

Next.js

In the App Router, fetch in a Server Component and pass the result as props — no useEffect needed:

import { TalentTree } from '@real-life-talent-tree/ui'
import type { TalentTree as TalentTreeType } from '@real-life-talent-tree/core'

async function fetchTree(username: string, slug: string): Promise<TalentTreeType> {
  const res = await fetch(`https://api.reallifetalenttree.com/api/v1/public/${username}/${slug}`)
  if (!res.ok) throw new Error('Tree not found')
  const { data } = await res.json()
  return data as TalentTreeType
}

export default async function Page() {
  const tree = await fetchTree('your-username', 'your-tree-slug')
  return <TalentTree tree={tree} />
}

In a Client Component, fetch inside useEffect:

'use client'

import { useEffect, useState } from 'react'
import { TalentTree } from '@real-life-talent-tree/ui'
import type { TalentTree as TalentTreeType } from '@real-life-talent-tree/core'

export function TalentTreeEmbed({ username, slug }: { username: string; slug: string }) {
  const [tree, setTree] = useState<TalentTreeType | null>(null)

  useEffect(() => {
    fetch(`https://api.reallifetalenttree.com/api/v1/public/${username}/${slug}`)
      .then((r) => r.json())
      .then(({ data }) => setTree(data))
  }, [username, slug])

  if (!tree) return null
  return <TalentTree tree={tree} />
}

Rendering the tree

import { TalentTree } from '@real-life-talent-tree/ui'
import type { TalentTree as TalentTreeType } from '@real-life-talent-tree/core'

interface Props {
  tree: TalentTreeType
}

export function MyTalentTree({ tree }: Props) {
  return <TalentTree tree={tree} />
}

Custom theming (optional)

ThemeProvider is optional — the component renders with sensible defaults without it. Use it only if you want to override colors:

import { TalentTree, ThemeProvider } from '@real-life-talent-tree/ui'
import type { TalentTree as TalentTreeType } from '@real-life-talent-tree/core'

export function MyTalentTree({ tree }: { tree: TalentTreeType }) {
  return (
    <ThemeProvider theme={{ nodeBg: '#1a1a2e', textPrimary: '#e0e0e0' }}>
      <TalentTree tree={tree} />
    </ThemeProvider>
  )
}

See the ThemeProvider reference for all available theme tokens.

Props

See the TalentTree component reference for the full props table.