FileTree

A project layout drawn as a tree.

app
- http
  controllers
  home.tsx
- jobs
  send-digest.ts
routes
- web.tsevery URL the app serves
database
- seed.ts
package.json
README.md

View code

tsx

<FileTree
	aria-label="Project layout"
	moreLabel="More files"
	nodes={[
		{
			name: "app",
			children: [
				{ name: "http", children: [{ name: "controllers", children: [{ name: "home.tsx" }, "…"] }] },
				{ name: "jobs", collapsed: true, children: [{ name: "send-digest.ts" }] },
			],
		},
		{ name: "routes", children: [{ name: "web.ts", highlight: true, comment: "every URL the app serves" }] },
		{ name: "database", children: [{ name: "seed.ts" }] },
		{ name: "package.json" },
		{ name: "README.md" },
	]}
/>

Demo docs sites

Whole pages built only from @sdxc/ui, each for an invented product with its own palette and type. They open in a new tab.

Every demo, landings and docs sites alike, is listed in the demo gallery.

Installation

An ordinary dependency: install it, import the theme once, and import the component where it is used.

Terminal

npm add @sdxc/ui remix

typescript

import "@sdxc/ui/theme.css";

Usage

typescript

import { FileTree } from "@sdxc/ui/docs";

Renders the tree's card: an optional caption, then the top level of entries in a box that scrolls sideways on its own when a deep path is wider than the page.

Props

Read from the component's own types, so every prop, every default and every allowed value is listed.

Prop	Type	Required	Description
`nodes`	`Entry[]`	Yes
`"aria-label"`	`string`	Yes	Names the tree for assistive technology, such as "Project layout".
`title`	`string`	No	A caption drawn above the tree, such as the project or directory the tree shows.
`moreLabel`	`string`	No	Accessible text for the `"…"` placeholder, such as "More files".

Also accepts everything in Omit<TagProps<"div">, "title">.