Code Tree Viewer

A file tree beside a code panel: choose a file and its code appears in place, highlighted, with its name and a copy button above it.

Examples

Project

Folders come first and open with a click or the arrow keys. Paths become the tree.

page.tsxsrc/app

import { NoteCard } from '@/components/note-card';
import { formatDay } from '@/lib/format-day';

const NOTES = [
  { id: 'n1', title: 'Harbour walk', writtenOn: '2026-10-12' },
  { id: 'n2', title: 'Market list', writtenOn: '2026-10-14' },
];

export default function Page() {
  return (
    <main className="mx-auto max-w-xl p-6">
      {NOTES.map((note) => (
        <NoteCard
          key={note.id}
          title={note.title}
          day={formatDay(note.writtenOn)}
        />
      ))}
    </main>
  );
}

Without line numbers

A shorter panel for a handful of configuration files.

tokens.cssconfig

:root {
  --radius: 0.625rem;
  --ease-out-strong: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
}

Installation

npx shadcn@latest add https://ui.ndekocode.dev/r/motion-code-tree-viewer.json

Component API

CodeTreeViewer

Prop	Type	Default	Description
files	CodeTreeFile[]		The files to show. Keep the array stable between renders.
defaultPath	string	the first file	The file shown on mount.
showLineNumbers	boolean	true	Whether each line starts with its number.
aria-label	string	'Files'	The name of the tree.
className	string		Classes for the frame, such as its height.

CodeTreeFile

Field	Type	Description
path	string	The file path with `/` between folders, such as `src/lib/format-day.ts`.
code	string	The content of the file.
language	string	A Shiki language id. By default it comes from the file extension.

Behaviour

Highlighting runs in the browser with Shiki, in light and dark themes at once, so the panel follows the theme without highlighting again. Every file is highlighted once when the viewer mounts, so switching files shows colours at once; until then the code shows plain, at the same size.
The panel changes its content in place. Only the row you choose and the folder you open respond.
The tree is a list of buttons: arrows move between rows and open folders, Enter or Space shows a file.

Credits

Inspired by the tree code viewer of UI Layouts, rebuilt on our tree and the Shiki setup of our code block.