Devie UI
Version: 2026-02-14

<TreeLine />

The TreeLine component renders tree structure connectors for creating visual hierarchies like file explorers, navigation trees, or any nested list that needs connecting lines. This is a custom Devie component (not based on Base UI).

Installation

Here is the component implementation code that you can copy to your project:

// https://devie-ui.com/components/tree-line
 
import clsx from "clsx";
import type React from "react";
import styles from "./TreeLine.module.scss";
 
type Variant =
  | "horizontal"
  | "vertical"
  | "cornerTopLeft"
  | "cornerTopRight"
  | "cornerBottomLeft"
  | "cornerBottomRight"
  | "branchRight"
  | "branchLeft"
  | "branchDown"
  | "branchUp";
 
function TreeLine({ variant, className, ...props }: TreeLine.Props) {
  return (
    <div
      className={clsx(
        styles.treeLine,
        variant === "horizontal" && styles.horizontal,
        variant === "vertical" && styles.vertical,
        variant === "cornerTopLeft" && styles.cornerTopLeft,
        variant === "cornerTopRight" && styles.cornerTopRight,
        variant === "cornerBottomLeft" && styles.cornerBottomLeft,
        variant === "cornerBottomRight" && styles.cornerBottomRight,
        variant === "branchRight" && styles.branchRight,
        variant === "branchLeft" && styles.branchLeft,
        variant === "branchDown" && styles.branchDown,
        variant === "branchUp" && styles.branchUp,
        className,
      )}
      {...props}
    />
  );
}
 
namespace TreeLine {
  export interface Props extends React.HTMLAttributes<HTMLDivElement> {
    variant: Variant;
  }
}
 
export default TreeLine;

Use Cases

All Variants

TreeLine provides 10 variants to create any tree structure: straight lines (horizontal, vertical), corners (cornerTopLeft, cornerTopRight, cornerBottomLeft, cornerBottomRight), and branches (branchRight, branchLeft, branchDown, branchUp).

horizontal
vertical
cornerTopLeft
cornerTopRight
cornerBottomLeft
cornerBottomRight
branchRight
branchLeft
branchDown
branchUp

File Tree Example

TreeLine can be composed to create file explorer-style hierarchies. This example shows a typical project structure with nested folders and files.

src
components
Button.tsx
Menu.tsx
utils
helpers.ts
index.ts