Shadcn Tree View
A Shadcn UI component for hierarchical lists of data with nested levels that can be expanded and collapsed.
Overview
The Tree View component by Shadcn UI is designed to facilitate navigation through hierarchical lists of data with expandable and collapsible nested levels. This component, inspired by the implementations by WangLarry and bytechase, provides features for expanding/collapsing items, custom icons for items, default node and leaf icons, action buttons for adding new items, and click handlers for individual tree items and the entire tree view.
Features
- Expand, collapse, and select items
- Custom icons per item (default, open, selected)
- Default node & leaf icons per tree view
- Action buttons (e.g. a button to add a new item)
- Click handlers per tree item and per the entire tree view
- React
React is a widely used JavaScript library for building user interfaces and single-page applications. It follows a component-based architecture and uses a virtual DOM to efficiently update and render UI components
- Tailwind
Tailwind CSS is a utility-first CSS framework that provides pre-defined classes for building responsive and customizable user interfaces.
- Shadcn UI
Beautifully designed components that you can copy and paste into your apps. Accessible. Customizable. Open Source.
- Typescript
TypeScript is a superset of JavaScript, providing optional static typing, classes, interfaces, and other features that help developers write more maintainable and scalable code. TypeScript's static typing system can catch errors at compile-time, making it easier to build and maintain large applications.
