FileTree

Static file and folder listings for technical documentation.

MDX@gaudi/design-system/mdx/FileTreeView in Storybook Source

Installation

pnpm add github:ahmadassaf/design-system

Import from @gaudi/design-system. Load @gaudi/design-system/global.css once and add transpilePackages: ['@gaudi/design-system'] in Next.js.

import FileTree from '@gaudi/design-system/mdx/FileTree';

Usage

<FileTree data={[  { name: 'content', isFolder: true, childrenProp: [{ name: 'post.mdx' }] },  { name: 'package.json' }]} />

Examples

Playground

Storybook

API

2 props

Accessibility

The listing composes Core Card and Item, preserves nested list semantics and has a named keyboard-scrollable region. isOpen controls which authored branches are shown; use Core/Tree for an interactive file explorer.

CardCard frames reusable content with title, subtitle, and optional children.8 examples ItemFlexible rows for people, settings, integrations, navigation and activity lists, composed from media, text, actions and optional header and footer rows.11 examples TreeBrowse hierarchical content with expansion, selection, checkboxes and drag feedback.3 examples