TreeViewItem

The TreeViewItem component renders a single item in the tree. It handles styling, icons, indentation, and inline editing.

Import

import { TreeViewItem } from "shadcn-treeview";

Props

Required Props

Prop	Type	Description
`name`	`string`	The display name of the item.
`level`	`number`	The nesting level (1-based).

Visual Props

Prop	Type	Default	Description
`isBranch`	`boolean`	`false`	Whether the item has children.
`isExpanded`	`boolean`	`false`	Whether the item is expanded.
`isSelected`	`boolean`	`false`	Whether the item is selected.
`isLoading`	`boolean`	`false`	Whether to show loading state.
`indentation`	`number`	`16`	Base indentation in pixels.
`levelIndentation`	`number`	`48`	Indentation per level in pixels.
`icon`	`ReactNode`	-	Icon to display before the name.
`expandIcon`	`ReactNode`	Chevron	Custom expand/collapse icon.
`loadingIcon`	`ReactNode`	Spinner	Custom loading icon.

Editing Props

Prop	Type	Default	Description
`isEditing`	`boolean`	`false`	Whether the item is in edit mode.
`onEditSubmit`	`(value: string) => void`	-	Called when editing is submitted.

Standard Props

The component also accepts all standard div props (className, style, etc.).

Styling

The component uses these CSS classes that can be customized:

Base: group relative flex h-8 cursor-pointer select-none items-center gap-3 text-sm text-muted-foreground transition-colors hover:bg-muted
Selected: !bg-muted text-foreground

Data Attributes

These data attributes are set on the element for custom styling:

data-treeview-is-branch - "true" or "false"
data-treeview-level - The level number

/* Example: Style branches differently */
[data-treeview-is-branch="true"] {
  font-weight: 500;
}

Usage Examples

Basic Item

<TreeViewItem
  name="my-file.tsx"
  level={1}
  isSelected={false}
  indentation={16}
  icon={<FileIcon className="h-4 w-4" />}
/>

Branch Item

<TreeViewItem
  name="components"
  level={1}
  isBranch={true}
  isExpanded={true}
  isSelected={false}
  indentation={16}
  icon={<FolderOpenIcon className="h-4 w-4" />}
/>

With Inline Editing

const [isEditing, setIsEditing] = useState(false);
const [name, setName] = useState("my-file.tsx");

<TreeViewItem
  name={name}
  level={1}
  isEditing={isEditing}
  onEditSubmit={(newName) => {
    setName(newName);
    setIsEditing(false);
  }}
  indentation={16}
/>

With Loading State

<TreeViewItem
  name="Loading..."
  level={1}
  isBranch={true}
  isLoading={true}
  indentation={16}
/>

Custom Icons

<TreeViewItem
  name="src"
  level={1}
  isBranch={true}
  isExpanded={true}
  indentation={16}
  expandIcon={<ChevronDownIcon className="h-4 w-4" />}
  loadingIcon={<Loader2Icon className="h-4 w-4 animate-spin" />}
  icon={<FolderIcon className="h-4 w-4" />}
/>

On this page