Skill Tree
NewPro
An SVG skill tree with prerequisites and points to spend, where energy runs along the path and lights each new skill.
Customize
8
900ms
Labels
#ff784f
#ffc24a
When to use it
- Talent and ability trees in RPG, roguelike and strategy games
- Learning paths where finished lessons unlock the next ones
- Product tours or loyalty programs that reveal perks step by step
Good to know
- Plan
- Pro
- Dependencies
- None beyond React
- Rendering
- DOM and CSS
- Reduced motion
- Respected
- Lines of code
- 832
Installation
Skill Tree is part of Pro. After purchase you're invited to the private mekai-ui/mekai-ui-pro GitHub repository: copy skill-tree.tsx into components/ui.
Usage
import { SkillTree, type SkillNode } from "@/components/ui/skill-tree";
const skills: SkillNode[] = [
{ id: "spark", name: "Spark", x: 200, y: 260, cost: 0, description: "Where it all starts." },
{ id: "bolt", name: "Bolt", x: 100, y: 130, requires: ["spark"] },
{ id: "ward", name: "Ward", x: 300, y: 130, requires: ["spark"] },
{ id: "storm", name: "Storm", x: 200, y: 20, requires: ["bolt", "ward"], cost: 3, capstone: true },
];
<SkillTree nodes={skills} points={5} onUnlock={(node) => learn(node.id)} />Props
13 properties| Property | Type | Default | Description |
|---|---|---|---|
| nodes | SkillNode[] | 13 sample skills | Skills with id, name, x, y, and optional icon, requires, cost, description and capstone. |
| points | number | 8 | Total points the player can spend. |
| unlocked | string[] | — | Unlocked skill ids. Pass it with onChange to control the tree. |
| defaultUnlocked | string[] | — | Skills unlocked at the start when the tree manages its own state. Defaults to free skills with no requirements. |
| onChange | (unlocked: string[], pointsLeft: number) => void | — | Called with the new unlocked ids and the points left. |
| onUnlock | (node: SkillNode) => void | — | Called when the player unlocks a skill. |
| color | string | "#ff784f" | Energy color. |
| capstoneColor | string | "#ffc24a" | Color of capstone skills. |
| flowDuration | number | 900 | How long the energy takes to travel from the root to a new skill, in milliseconds. |
| showLabels | boolean | true | Show skill names under the nodes. |
| panel | boolean | true | Show the points row and the skill details. |
| minScale | number | 0.74 | Smallest scale before the tree stops shrinking and pans instead. 0 always fits the container. |
| className | string | — | Extra classes for the wrapper. |