Tree view
A tree view that assembles all the functionalities of the Accordion component to create a tree view.
utils
Variants
Nested Tree View
The TreeView component can be nested to create a nested tree view. Here is an example of what you get when you init a new project with Ever UI:
Installation
Run the following command:
npx ever-ui-clx@0.2.1 add demo-tree-viewUpdate tailwind.config.ts
Modify your tailwind.config.ts as follows:
// tailwind.config.ts
module.exports = {
theme: {
extend: {
keyframes: {
"accordionDown": {
from: { height: "0" },
to: { height: "var(--radix-accordion-content-height)" },
},
"accordionUp": {
from: { height: "var(--radix-accordion-content-height)" },
to: { height: "0" },
},
},
animation: {
"accordionDown": "accordionDown 0.2s ease-out",
"accordionUp": "accordionUp 0.2s ease-out",
},
},
},
};Usage
import { File, Folder, TreeView } from "@/registry/default/ui/tree-view";<TreeView>
<Folder name="app" defaultOpen>
<File name="layout.tsx" />
<File name="page.tsx" />
<File name="global.css" />
</Folder>
<Folder name="components">
<File name="tabs.tsx" />
<File name="dialog.tsx" />
</Folder>
<File name="package.json" />
</TreeView>