Components
- Accordion
- Alert Dialog
- Alert
- Autocomplete
- Avatar
- Badge
- Button Group
- Button
- Card
- Carousel
- Chart
- Checkbox
- Clipboard
- Collapsible
- Combobox
- Command
- Context Menu
- Date Picker
- Dialog
- Editable
- Field
- File Upload
- Floating Panel
- Hover Card
- Input Group
- Input OTP
- Input
- Item
- Kbd
- Marquee
- Menu
- Native Select
- Number Input
- Pagination
- Popover
- Progress
- QR Code
- Radio Group
- Rating Group
- Scroll Area
- Select
- Separator
- Sheet
- Skeleton
- Slider
- Spinner
- Splitter
- Steps
- Switch
- Table
- Tabs
- Textarea
- Toast
- Toggle Group
- Toggle
- Tooltip
- Tour
- Tree View
File Explorer
node_modules
src
panda.config.ts
package.json
renovate.json
README.md
Installation
pnpm dlx shadcn@latest add @shark-ui/tree-view
Usage
import { createTreeCollection } from "@ark-ui/react/tree-view"; import { TreeView, TreeViewLabel, TreeViewTree, TreeViewNodeProvider, TreeViewBranch, TreeViewBranchControl, TreeViewBranchText, TreeViewBranchIndicator, TreeViewBranchContent, TreeViewBranchIndentGuide, TreeViewItem, TreeViewItemText } from "@/components/ui/tree-view";
const collection = createTreeCollection({ nodeToValue: (node) => node.id, nodeToString: (node) => node.name, rootNode: { id: "ROOT", name: "", children: [ { id: "src", name: "src", children: [ { id: "src/app.tsx", name: "app.tsx" }, { id: "src/index.ts", name: "index.ts" }, ], }, { id: "package.json", name: "package.json" }, ], }, }); <TreeView collection={collection}> <TreeViewLabel>File Explorer</TreeViewLabel> <TreeViewTree> {collection.rootNode.children?.map((node, index) => ( <TreeNode key={node.id} node={node} indexPath={[index]} /> ))} </TreeViewTree> </TreeView>
Examples
Default
File Explorer
node_modules
src
panda.config.ts
package.json
renovate.json
README.md