Login

u/softmarshmallow

▲ 32 r/shadcn+1 crossposts

A tree-view block for shadcn — Figma, VS Code, Notion-style trees in one install

shadcn has a block for almost everything except the one widget that shows up in every real app — a tree-view. I just shipped one: @grida/tree-view, installable as a shadcn block. One line in your project and you've got the same tree-view shape behind Figma's layers panel, VS Code's file explorer, Notion's sidebar, and Finder's columns — themed with your own Tailwind tokens, like every other shadcn component.

npx shadcn@latest add https://grida.co/r/tree-view-row.json

Five live themed demos on the landing page so you can see the same engine wearing five different skins: https://grida.co/packages/@grida/tree-view Drop it in, restyle it, ship it.

u/softmarshmallow — 3 days ago
▲ 1 r/reactjs

The React tree-view library behind Figma, VS Code, Notion, and Finder-style UIs — in one install

Every React app eventually grows a tree-view. Layers panel, file explorer, workspace sidebar, settings tree. And almost every team hand-rolls it because no library actually hits the bar.

I just shipped @grida/tree-view — the React tree-view library behind UIs like Figma's layers panel, VS Code's file explorer, Notion's sidebar, and Finder's columns. Five live, themed demos on the landing page, all powered by the same engine.

Drag, multi-select, nested drop targets, keyboard nav, big lists, accessibility — solved once, themed however you want. Drop it into an existing shadcn/Tailwind project with one line:

Or grab the package directly:

Landing + live demos: https://grida.co/packages/@grida/tree-view

npm: https://npmjs.com/@grida/tree-view

Curious what tree-view pain people are still hitting in React — drag intents, 10k+ rows, virtualization, a11y? Happy to dig in.

grida.co
u/softmarshmallow — 3 days ago