1 GitHub star = 1 new component.

Star the repo
Data Displaytreedatafiles

File Tree Structure

Collapsible file and folder tree structure.

πŸ“ src
πŸ“ components
πŸ“„ Button.astro
πŸ“„ Card.astro
πŸ“„ styles.css
πŸ“„ astro.config.mjs

Usage

Copy and paste this code into your React component:

tsx
import { FileTreeView } from 'react-component-kit-ui/data';

<FileTreeView>Content</FileTreeView>

Manual Installation

If you are not using the npm package, create a new file and paste the following code: src/components/FileTreeView.tsx + FileTreeView.css:

FileTreeView.tsx
'use client';

import './FileTreeView.css';

/** FileTreeView β€” ported from astro-component-kit. */
export interface FileTreeViewProps {
}

export function FileTreeView({}: FileTreeViewProps) {
  return (
    <>
      <div className="tree" data-rk-7f8c09="">
        <div className="folder active" data-rk-7f8c09="">πŸ“ src</div>
        <div className="indent" data-rk-7f8c09="">
          <div className="folder" data-rk-7f8c09="">πŸ“ components</div>
          <div className="indent" data-rk-7f8c09="">
            <div className="file" data-rk-7f8c09="">πŸ“„ Button.astro</div>
            <div className="file" data-rk-7f8c09="">πŸ“„ Card.astro</div>
          </div>
          <div className="file" data-rk-7f8c09="">πŸ“„ styles.css</div>
        </div>
        <div className="file" data-rk-7f8c09="">πŸ“„ astro.config.mjs</div>
      </div>
    </>
  );
}

export default FileTreeView;
FileTreeView.css
/* FileTreeView β€” ported from astro-component-kit (data/FileTreeView.astro) */

.tree:where([data-rk-7f8c09]) { font-family: monospace; font-size: 0.85rem; color: #94a3b8; line-height: 1.8; }
.indent:where([data-rk-7f8c09]) { padding-left: 1.25rem; border-left: 1px solid rgba(255,255,255,0.1); }
.folder:where([data-rk-7f8c09]) { color: #fff; font-weight: 700; cursor: pointer; }
.folder.active:where([data-rk-7f8c09]) { color: #818cf8; }
.file:where([data-rk-7f8c09]) { cursor: pointer; padding-left: 4px; }
.file:hover:where([data-rk-7f8c09]) { color: #fff; }

Quick Info

Category
Data Display
Filename
FileTreeView.tsx
Dependencies
None β€” pure React + CSS
Tags
treedatafiles