Tree
Guide Line Tree
An expanded structure with real guide lines: on the last node of a branch the vertical is cut to the elbow's height, so the line ends there instead of trailing into empty space.
What you can change
- the structure through nodes, including the note on a node
- the tree caption through label
- line — the colour of the level guides
A link for your AI agent: preview, code and instructions.
Preview
Use it with AI
- 1. Copy the link.
- 2. Write to your agent in your own words and drop the link into the sentence.
- 3. The agent opens the link and installs the component from the registry.
put this on the home page as the hero:
https://vibeui.ru/c/tree-008?lang=en&theme=dark
Not sure where to paste it? Step-by-step guide
Show the full instructions
What the link says, spelled out. Use it when your agent cannot open links — paste this text instead.
Loading…
For developers
The install command lives in the “Component source” block below — a signed link that stays valid for 24 hours.
Technical notes
The component is self-contained: one file, no dependencies, its own palette in the local --vibeui-tree-008-* variables. Server rendered: no hooks, the tree is always expanded. The elbow is drawn by two pseudo-elements of the node: ::before is the branch vertical, ::after the crossbar at the middle of the row; on :last-child the vertical is cut to half a row, which produces exactly what the tree command prints in a terminal. The box drawing does not go into the text: the ├ and └ characters would end up in the clipboard when names are copied. The row height is lifted into a variable, because the crossbar position is measured from it. The tree, treeitem and group roles with aria-level describe the structure, and aria-expanded on branches is declared permanently true.
Tags
- tree
- guides
- structure
- display
Component source
The same file your agent installs. Here in case you would rather copy it by hand.
Loading…