Docs
Code Folder

Code Folder

A component that displays a file and folder structure in a collapsible tree view, wrapped in a card.

Installation

Install the following dependencies:

npm install framer-motion lucide-react

Copy and paste the cn util code into your project.

import { ClassValue, clsx } from "clsx"
import { twMerge } from "tailwind-merge"
 
 
export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs))
}

Update tailwind.config.js

Add the following animations to your tailwind.config.js file:

tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    extend: {
       color: {
          panel: {
            background: "hsl(var(--background))",
            border: "hsl(var(--border))",
          },
        },
    },
  },
}

Copy and paste the Generate Text code into your project.

API Reference

Props

PropTypeDefaultDescription
dataDirectoryItem[]"undefined"An array of directory items to render in the tree view.
classNamestringundefinedAdditional CSS classes to apply to the inner div of the card.
containerClassNamestringundefinedAdditional CSS classes to apply to the root element of the card.
idstringundefinedAn ID for the root card element, useful for linking or :target styling.

Data Structure (DirectoryItem)

The data prop must be an array of objects, where each object conforms to the DirectoryItem type.

PropTypeDefaultDescription
namestring"undefined"Required. The name of the file or folder.
githubUrlstringundefinedAn optional URL. If provided, a link icon will appear on hover.
isLockedbooleanundefinedIf true, the folder cannot be expanded and shows a lock icon.
childrenDirectoryItem[]undefinedAn optional array of child items to create a nested folder structure.

Usage

import CodeFloder from "@/components/ui/code-floder";
 
// Define your directory structure
const myProjectData = [
  {
    name: "my-awesome-app",
    githubUrl: "https://github.com/user/my-awesome-app",
    children: [
      { 
        name: "src",
        children: [
          { name: "components", children: [{ name: "Button.tsx" }] },
          { name: "app", children: [{ name: "page.tsx" }] },
        ]
      },
      { name: "node_modules", isLocked: true },
      { name: "package.json" },
    ],
  },
];
 
export default function MyPage() {
  return (
    <CodeFloder 
      data={myProjectData}
      containerClassName="w-full max-w-md"
    />
  );
}
PreviewApple Liqui...