[{"data":1,"prerenderedAt":428},["ShallowReactive",2],{"github-repository":3,"navigation":5,"\u002Fdocs\u002Fcomponents\u002Ftree-view":99,"surround-\u002Fdocs\u002Fcomponents\u002Ftree-view":426},{"stargazersCount":4},44,[6],{"title":7,"path":8,"stem":9,"children":10,"page":98},"Docs","\u002Fdocs","docs",[11,34],{"path":8,"stem":9,"title":12,"type":13,"children":14},"Overview","group",[15,21,25,29],{"title":16,"path":17,"stem":18,"tag":19,"type":20,"children":-1},"Introduction","\u002Fdocs\u002Fintroduction","docs\u002F1.introduction",null,"page",{"title":22,"path":23,"stem":24,"tag":19,"type":20,"children":-1},"Getting Started","\u002Fdocs\u002Fgetting-started","docs\u002F2.getting-started",{"title":26,"path":27,"stem":28,"tag":19,"type":20,"children":-1},"Registries","\u002Fdocs\u002Fregistries","docs\u002F3.registries",{"path":30,"stem":31,"title":32,"type":33},"\u002Fllms.txt","llms.txt","Llms.txt","asset",{"title":35,"path":36,"stem":37,"children":38,"page":98,"type":13},"Components","\u002Fdocs\u002Fcomponents","docs\u002Fcomponents",[39,44,48,53,58,62,66,70,74,78,82,86,90,94],{"title":40,"path":41,"stem":42,"tag":19,"type":43,"children":-1},"ActionSheet","\u002Fdocs\u002Fcomponents\u002Faction-sheet","docs\u002Fcomponents\u002Faction-sheet","component",{"title":45,"path":46,"stem":47,"tag":19,"type":43,"children":-1},"Autocomplete","\u002Fdocs\u002Fcomponents\u002Fautocomplete","docs\u002Fcomponents\u002Fautocomplete",{"title":49,"path":50,"stem":51,"tag":52,"type":43,"children":-1},"Color","\u002Fdocs\u002Fcomponents\u002Fcolor","docs\u002Fcomponents\u002Fcolor","alpha",{"title":54,"path":55,"stem":56,"tag":57,"type":43,"children":-1},"Filters","\u002Fdocs\u002Fcomponents\u002Ffilters","docs\u002Fcomponents\u002Ffilters","updated",{"title":59,"path":60,"stem":61,"tag":19,"type":43,"children":-1},"Gallery","\u002Fdocs\u002Fcomponents\u002Fgallery","docs\u002Fcomponents\u002Fgallery",{"title":63,"path":64,"stem":65,"tag":19,"type":43,"children":-1},"Image","\u002Fdocs\u002Fcomponents\u002Fimage","docs\u002Fcomponents\u002Fimage",{"title":67,"path":68,"stem":69,"tag":19,"type":43,"children":-1},"Image Viewer","\u002Fdocs\u002Fcomponents\u002Fimage-viewer","docs\u002Fcomponents\u002Fimage-viewer",{"title":71,"path":72,"stem":73,"tag":19,"type":43,"children":-1},"PasswordField","\u002Fdocs\u002Fcomponents\u002Fpassword-field","docs\u002Fcomponents\u002Fpassword-field",{"title":75,"path":76,"stem":77,"tag":19,"type":43,"children":-1},"PhoneField","\u002Fdocs\u002Fcomponents\u002Fphone-field","docs\u002Fcomponents\u002Fphone-field",{"title":79,"path":80,"stem":81,"tag":19,"type":43,"children":-1},"ResizeMotion","\u002Fdocs\u002Fcomponents\u002Fresize-motion","docs\u002Fcomponents\u002Fresize-motion",{"title":83,"path":84,"stem":85,"tag":19,"type":43,"children":-1},"Stack Menu","\u002Fdocs\u002Fcomponents\u002Fstack-menu","docs\u002Fcomponents\u002Fstack-menu",{"title":87,"path":88,"stem":89,"tag":19,"type":43,"children":-1},"TimeField","\u002Fdocs\u002Fcomponents\u002Ftime-field","docs\u002Fcomponents\u002Ftime-field",{"title":91,"path":92,"stem":93,"tag":19,"type":43,"children":-1},"Timeline","\u002Fdocs\u002Fcomponents\u002Ftimeline","docs\u002Fcomponents\u002Ftimeline",{"title":95,"path":96,"stem":97,"tag":52,"type":43,"children":-1},"Tree View","\u002Fdocs\u002Fcomponents\u002Ftree-view","docs\u002Fcomponents\u002Ftree-view",false,{"id":100,"title":95,"body":101,"description":419,"extension":420,"meta":421,"navigation":422,"path":96,"rawbody":423,"seo":424,"stem":97,"tag":52,"__hash__":425},"content\u002Fdocs\u002Fcomponents\u002Ftree-view.md",{"type":102,"value":103,"toc":408},"minimark",[104,108,113,195,199,203,208,212,222,292,296,301,322,325,332,382,386,399,402],[105,106],"component-preview",{"name":107},"TreeViewDemo",[109,110,112],"h2",{"id":111},"features","Features",[114,115,116,144,158,175,185],"ul",{},[117,118,119,123,124,131,132,136,137,136,140,143],"li",{},[120,121,122],"strong",{},"Reka UI Tree"," — Built on the alpha ",[125,126,130],"a",{"href":127,"rel":128},"https:\u002F\u002Freka-ui.com\u002Fdocs\u002Fcomponents\u002Ftree",[129],"nofollow","Tree"," primitive (",[133,134,135],"code",{},"TreeRoot",", ",[133,138,139],{},"TreeItem",[133,141,142],{},"TreeVirtualizer",")",[117,145,146,149,150,153,154,157],{},[120,147,148],{},"Composable parts"," — Style each row with ",[133,151,152],{},"TreeViewItem",", optional ",[133,155,156],{},"TreeViewIndicator",", and your own label content",[117,159,160,163,164,167,168,171,172],{},[120,161,162],{},"Guideline variants"," — Connect branches with ",[133,165,166],{},"guideline=\"straight\""," or ",[133,169,170],{},"guideline=\"rounded\""," on ",[133,173,174],{},"TreeView",[117,176,177,180,181,184],{},[120,178,179],{},"Virtualization"," — Use ",[133,182,183],{},"TreeViewVirtualizer"," for large trees",[117,186,187,190,191,194],{},[120,188,189],{},"Controlled expansion"," — Bind ",[133,192,193],{},"v-model:expanded"," to open and close branches programmatically",[109,196,198],{"id":197},"installation","Installation",[200,201,202],"p",{},"Install from the Vuzeno registry with the shadcn-vue CLI:",[204,205],"installation-tabs",{":exec":206,"command":207},"true","shadcn-vue@latest add https:\u002F\u002Fvuzeno.com\u002Fr\u002Ftree-view.json",[109,209,211],{"id":210},"anatomy","Anatomy",[213,214,220],"pre",{"className":215,"code":217,"language":218,"meta":219},[216],"language-vue","\u003Ctemplate>\n  \u003CTreeView v-slot=\"{ flattenItems }\" :items :get-key=\"(item) => item.id\">\n    \u003CTreeViewItem\n      v-for=\"item in flattenItems\"\n      :key=\"item._id\"\n      v-slot=\"slotProps\"\n      v-bind=\"item.bind\"\n    >\n      \u003CTreeViewIndicator v-bind=\"slotProps\" :has-children=\"item.hasChildren\" \u002F>\n      {{ item.value.title }}\n    \u003C\u002FTreeViewItem>\n  \u003C\u002FTreeView>\n\u003C\u002Ftemplate>\n","vue","",[133,221,217],{"__ignoreMap":219},[114,223,224,236,267,279],{},[117,225,226,228,229,231,232,235],{},[120,227,174],{}," — Wraps ",[133,230,135],{},". Forwards all Reka Tree props and exposes the ",[133,233,234],{},"flattenItems"," slot prop.",[117,237,238,228,240,242,243,246,247,249,250,136,253,136,256,136,259,262,263,266],{},[120,239,152],{},[133,241,139],{},". Pass ",[133,244,245],{},"v-bind=\"item.bind\""," from ",[133,248,234],{},". Exposes ",[133,251,252],{},"isExpanded",[133,254,255],{},"isSelected",[133,257,258],{},"isIndeterminate",[133,260,261],{},"handleToggle",", and ",[133,264,265],{},"handleSelect"," on the default slot.",[117,268,269,271,272,274,275,278],{},[120,270,156],{}," — Optional expand control for branch nodes. Pass slot props from ",[133,273,152],{}," plus ",[133,276,277],{},"has-children"," from the flattened item.",[117,280,281,228,283,285,286,288,289,291],{},[120,282,183],{},[133,284,142],{}," for virtualized lists. Place inside ",[133,287,174],{}," instead of iterating ",[133,290,234],{}," manually.",[109,293,295],{"id":294},"examples","Examples",[297,298,300],"h3",{"id":299},"variants","Variants",[200,302,303,304,171,307,309,310,313,314,317,318,321],{},"Set ",[133,305,306],{},"guideline",[133,308,174],{}," to draw connector lines between branches. Use ",[133,311,312],{},"\"straight\""," for vertical guides or ",[133,315,316],{},"\"rounded\""," for elbow connectors on child rows. Omit the prop (or use ",[133,319,320],{},"\"none\"",") for a plain list.",[105,323],{"name":324},"TreeViewVariantsDemo",[213,326,330],{"className":327,"code":328,"language":218,"meta":329},[216],"\u003Ctemplate>\n  \u003CTreeView\n    v-slot=\"{ flattenItems }\"\n    guideline=\"rounded\"\n    :items\n    :get-key=\"(item) => item.id\"\n  >\n    \u003CTreeViewItem\n      v-for=\"item in flattenItems\"\n      :key=\"item._id\"\n      v-slot=\"slotProps\"\n      v-bind=\"item.bind\"\n    >\n      \u003CTreeViewIndicator v-bind=\"slotProps\" :has-children=\"item.hasChildren\" \u002F>\n      {{ item.value.title }}\n    \u003C\u002FTreeViewItem>\n  \u003C\u002FTreeView>\n\u003C\u002Ftemplate>\n","showLineNumbers",[133,331,328],{"__ignoreMap":219},[333,334,335,348],"table",{},[336,337,338],"thead",{},[339,340,341,345],"tr",{},[342,343,344],"th",{},"Value",[342,346,347],{},"Description",[349,350,351,362,372],"tbody",{},[339,352,353,359],{},[354,355,356],"td",{},[133,357,358],{},"none",[354,360,361],{},"Default. No connector lines.",[339,363,364,369],{},[354,365,366],{},[133,367,368],{},"straight",[354,370,371],{},"Vertical line through expanded branch children.",[339,373,374,379],{},[354,375,376],{},[133,377,378],{},"rounded",[354,380,381],{},"Vertical line plus rounded elbows on child rows.",[297,383,385],{"id":384},"virtual-list","Virtual list",[200,387,388,389,391,392,394,395,398],{},"For large trees, swap the ",[133,390,234],{}," loop for ",[133,393,183],{},". Give the virtualizer a fixed height and pass ",[133,396,397],{},"text-content"," so type-ahead search can resolve item labels.",[105,400],{"name":401},"TreeViewVirtualDemo",[213,403,406],{"className":404,"code":405,"language":218,"meta":329},[216],"\u003Ctemplate>\n  \u003CTreeView :items :get-key=\"(item) => item.id\">\n    \u003CTreeViewVirtualizer\n      v-slot=\"{ item }\"\n      :text-content=\"(node) => node.title\"\n      class=\"h-64\"\n    >\n      \u003CTreeViewItem v-slot=\"slotProps\" v-bind=\"item.bind\">\n        \u003CTreeViewIndicator v-bind=\"slotProps\" :has-children=\"item.hasChildren\" \u002F>\n        {{ item.value.title }}\n      \u003C\u002FTreeViewItem>\n    \u003C\u002FTreeViewVirtualizer>\n  \u003C\u002FTreeView>\n\u003C\u002Ftemplate>\n",[133,407,405],{"__ignoreMap":219},{"title":219,"searchDepth":409,"depth":409,"links":410},2,[411,412,413,414],{"id":111,"depth":409,"text":112},{"id":197,"depth":409,"text":198},{"id":210,"depth":409,"text":211},{"id":294,"depth":409,"text":295,"children":415},[416,418],{"id":299,"depth":417,"text":300},3,{"id":384,"depth":417,"text":385},"Thin wrappers around Reka UI Tree primitives for accessible hierarchical lists.","md",{},true,"---\ntitle: Tree View\ndescription: Thin wrappers around Reka UI Tree primitives for accessible hierarchical lists.\ntag: alpha\n---\n\n::component-preview\n---\nname: TreeViewDemo\n---\n::\n\n## Features\n\n- **Reka UI Tree** — Built on the alpha [Tree](https:\u002F\u002Freka-ui.com\u002Fdocs\u002Fcomponents\u002Ftree) primitive (`TreeRoot`, `TreeItem`, `TreeVirtualizer`)\n- **Composable parts** — Style each row with `TreeViewItem`, optional `TreeViewIndicator`, and your own label content\n- **Guideline variants** — Connect branches with `guideline=\"straight\"` or `guideline=\"rounded\"` on `TreeView`\n- **Virtualization** — Use `TreeViewVirtualizer` for large trees\n- **Controlled expansion** — Bind `v-model:expanded` to open and close branches programmatically\n\n## Installation\n\nInstall from the Vuzeno registry with the shadcn-vue CLI:\n\n::installation-tabs\n---\ncommand: shadcn-vue@latest add https:\u002F\u002Fvuzeno.com\u002Fr\u002Ftree-view.json\nexec: true\n---\n::\n\n## Anatomy\n\n```vue\n\u003Ctemplate>\n  \u003CTreeView v-slot=\"{ flattenItems }\" :items :get-key=\"(item) => item.id\">\n    \u003CTreeViewItem\n      v-for=\"item in flattenItems\"\n      :key=\"item._id\"\n      v-slot=\"slotProps\"\n      v-bind=\"item.bind\"\n    >\n      \u003CTreeViewIndicator v-bind=\"slotProps\" :has-children=\"item.hasChildren\" \u002F>\n      {{ item.value.title }}\n    \u003C\u002FTreeViewItem>\n  \u003C\u002FTreeView>\n\u003C\u002Ftemplate>\n```\n\n- **TreeView** — Wraps `TreeRoot`. Forwards all Reka Tree props and exposes the `flattenItems` slot prop.\n- **TreeViewItem** — Wraps `TreeItem`. Pass `v-bind=\"item.bind\"` from `flattenItems`. Exposes `isExpanded`, `isSelected`, `isIndeterminate`, `handleToggle`, and `handleSelect` on the default slot.\n- **TreeViewIndicator** — Optional expand control for branch nodes. Pass slot props from `TreeViewItem` plus `has-children` from the flattened item.\n- **TreeViewVirtualizer** — Wraps `TreeVirtualizer` for virtualized lists. Place inside `TreeView` instead of iterating `flattenItems` manually.\n\n## Examples\n\n### Variants\n\nSet `guideline` on `TreeView` to draw connector lines between branches. Use `\"straight\"` for vertical guides or `\"rounded\"` for elbow connectors on child rows. Omit the prop (or use `\"none\"`) for a plain list.\n\n::component-preview\n---\nname: TreeViewVariantsDemo\n---\n::\n\n```vue showLineNumbers\n\u003Ctemplate>\n  \u003CTreeView\n    v-slot=\"{ flattenItems }\"\n    guideline=\"rounded\"\n    :items\n    :get-key=\"(item) => item.id\"\n  >\n    \u003CTreeViewItem\n      v-for=\"item in flattenItems\"\n      :key=\"item._id\"\n      v-slot=\"slotProps\"\n      v-bind=\"item.bind\"\n    >\n      \u003CTreeViewIndicator v-bind=\"slotProps\" :has-children=\"item.hasChildren\" \u002F>\n      {{ item.value.title }}\n    \u003C\u002FTreeViewItem>\n  \u003C\u002FTreeView>\n\u003C\u002Ftemplate>\n```\n\n| Value      | Description                                      |\n| ---------- | ------------------------------------------------ |\n| `none`     | Default. No connector lines.                     |\n| `straight` | Vertical line through expanded branch children.  |\n| `rounded`  | Vertical line plus rounded elbows on child rows. |\n\n### Virtual list\n\nFor large trees, swap the `flattenItems` loop for `TreeViewVirtualizer`. Give the virtualizer a fixed height and pass `text-content` so type-ahead search can resolve item labels.\n\n::component-preview\n---\nname: TreeViewVirtualDemo\n---\n::\n\n```vue showLineNumbers\n\u003Ctemplate>\n  \u003CTreeView :items :get-key=\"(item) => item.id\">\n    \u003CTreeViewVirtualizer\n      v-slot=\"{ item }\"\n      :text-content=\"(node) => node.title\"\n      class=\"h-64\"\n    >\n      \u003CTreeViewItem v-slot=\"slotProps\" v-bind=\"item.bind\">\n        \u003CTreeViewIndicator v-bind=\"slotProps\" :has-children=\"item.hasChildren\" \u002F>\n        {{ item.value.title }}\n      \u003C\u002FTreeViewItem>\n    \u003C\u002FTreeViewVirtualizer>\n  \u003C\u002FTreeView>\n\u003C\u002Ftemplate>\n```\n",{"title":95,"description":419},"3RNm4XFQdogxdAJknEUaipTgFJ-WPzHjoddhLKM92xs",[427,19],{"title":91,"path":92,"stem":93,"children":-1},1780523894096]