TreesA file tree rendering library
@pierre/trees is an open source file tree rendering library. It's built for performance and flexibility, is super customizable, and comes packed with features. Made by The Pierre Computer Company.
Currently v1.0.0
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051import type { ButtonHTMLAttributes, ReactNode } from 'react';
import { cn } from '../utils/cn';
export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> { variant?: 'primary' | 'secondary' | 'ghost' | 'danger'; size?: 'sm' | 'md' | 'lg'; isLoading?: boolean; children: ReactNode;}
const VARIANT_CLASSES: Record<NonNullable<ButtonProps['variant']>, string> = { primary: 'bg-brand-600 text-white hover:bg-brand-500', secondary: 'bg-zinc-200 text-zinc-900 hover:bg-zinc-300', ghost: 'bg-transparent text-zinc-200 hover:bg-white/10', danger: 'bg-danger text-white hover:brightness-110',};
const SIZE_CLASSES: Record<NonNullable<ButtonProps['size']>, string> = { sm: 'px-2 py-1 text-xs', md: 'px-3 py-1.5 text-sm', lg: 'px-4 py-2 text-base',};
export function Button({ variant = 'primary', size = 'md', isLoading = false, className, disabled, children, ...rest}: ButtonProps) { return ( <button {...rest} disabled={disabled ?? isLoading} aria-busy={isLoading || undefined} className={cn( 'inline-flex items-center justify-center rounded font-medium transition', 'disabled:cursor-not-allowed disabled:opacity-60', VARIANT_CLASSES[variant], SIZE_CLASSES[size], className, )} > {children} </button> );}
Flatten empty directories
Enable the flattenEmptyDirectories boolean option in the tree options. It collapses single-child folder chains into one row. The result is a more compact tree. Tree-shape options…
Show Git status on files
Use the gitStatus option to show status badges for added, modified, deleted, renamed, untracked, and ignored files. Ignored items inherit their styling and show no indicator. Folders with changed descendants get a dot indicator automatically.
| Indicator | State | Description |
|---|---|---|
| M | modified | Tracked file with uncommitted changes |
| A | added | New file staged in the working tree |
| D | deleted | Tracked file removed from the working tree |
| R | renamed | Tracked file moved or renamed |
| U | untracked | New file not yet tracked by Git |
None | ignored | Path excluded by gitignore; inherits muted styling |
| ● | descendant | Folder contains changed descendants |
Context menu composition
Render your own custom context menu with composition.contextMenu and the React renderContextMenu prop. This demo shows trigger modes for right-click, the trigger button, or both. It also shows menu actions for new files, new folders, rename, and delete. This demo uses Shadcn UI components for the context menu as an example. Your app can use the menus that you already have.