shadcn.io is not affiliated with official shadcn/ui
Skill Tree Branch Graph Features Block for Radix UI
A dependency tree of nine toggles for a modular SDK: switching a module on switches on what it needs, switching one off switches off what depends on it, and a counter and a bundle size follow.
Installation
Overview
A dependency-tree features section for React with Radix UI. A root module, Core, branches into Auth, Data and Realtime and those into five leaves, laid out from the start to the end in a framed figure. Each of the nine modules is a toggle button: switching one on switches on everything it needs, and switching one off switches off everything that needs it, so the tree can never be in a state that wouldn't build. Connectors are solid to a module that is on and dashed to one that is off. Beside the figure a counter reads "5 of 9 modules enabled" with a segmented bar and the bundle size, and a panel describes whichever module has focus or the pointer. Below lg the tree is an indented list with no connectors. It's built from Toggle, Badge, Data List, Sliding Number and Guides, with your theme's tokens for every colour. For SDKs, plugin systems and any product you assemble from parts that depend on one another.
FAQ
How do I change the modules?
Edit MODULES at the top of the file, in tree order: each has an id, a name, a sentence, a size in kilobytes and, except for the root, the id of the module it needs. The rules for switching on and off, the counter and the bundle size all come from that list. The layout draws three levels: the root, its children and theirs.
What exactly happens when I switch a module on or off?
Switching on adds the module and everything above it in the tree. Switching off removes the module and everything below it. Both are small pure functions (needs, dependants and toggled) that you can test on their own, so the tree never holds a module without what it needs.
How do I use it with a keyboard?
Every module is a button in the tab order: Enter or Space switches it. The arrow keys are a shortcut on top of that: Down and Up walk the list in tree order, the start-side arrow goes to a module's parent and the end-side arrow to its first child. Focus also fills the panel beside the tree, so a keyboard user sees the same detail a pointer does.
What does a screen reader read?
Each module is a toggle button with its name and whether it is pressed, inside a list named Modules. The counter is a live output, so switching a module reads "6 of 9 modules enabled", and the dashed or solid connectors are decoration that the pressed state already says.