New Nested Folder

Add a folder inside the parent file so you can group related pieces such as hooks, utilities, or sub-components without leaving the component tree.

When to use

• When you need a child component that requires more files (e.g., hooks, utilities, or styles) rather than a single file
• When the component tree needs multiple layers of organization

How to use

1. Right-click on a file (e.g. ParentComponent.tsx) in the File Nesting Explorer panel
2. Select "New Nested Folder..." from the context menu
3. Enter the name for your new folder (e.g. child-component)
4. The folder shows up directly under the parent file

ParentComponent.tsx
  └── child-component/

5. To import files from the nested folder inside the parent file, import them using the relative path and the parent name with the @ alias. For example:

ParentComponent.tsx

import { AnyFileName } from "./@ParentComponent/child-component/{AnyFileName}";

Example

If you have Dashboard.tsx and you need a child component Sidebar.tsx that requires styles and hooks:

Dashboard.tsx
  └── sidebar/
  |   └── sidebar-hooks.ts
  |   └── sidebar-styles.css
  |   └── Sidebar.tsx
  └── OtherComponent.tsx

Create the nested folder sidebar/ inside the Dashboard.tsx file.

Dashboard.tsx
  └── sidebar/

Create the sidebar-hooks.ts and sidebar-styles.css files inside the sidebar/ folder.

Dashboard.tsx
  └── sidebar/
      └── sidebar-hooks.ts
      └── sidebar-styles.css

Create the Sidebar.tsx file inside the sidebar/ folder. Use the relative path to import the hooks and styles:

Dashboard.tsx
  └── sidebar/
      └── sidebar-hooks.ts
      └── sidebar-styles.css
      └── Sidebar.tsx

Sidebar.tsx

import { useSidebar } from "./sidebar-hooks";
import styles from "./sidebar-styles.css";

export const Sidebar = () => {
  const { isOpen } = useSidebar();

  return (
    <div className={styles.sidebar}>{isOpen ? <div>Sidebar</div> : null}</div>
  );
};

In the Dashboard.tsx parent file, import the Sidebar component using the relative path with the parent name with the @ alias and the folder name. For example: ./@{ParentName}/{FolderName}/{FileName}:

Dashboard.tsx

import { Sidebar } from "./@Dashboard/sidebar/Sidebar"; // ./@{ParentName}/{FolderName}/{FileName}

export const Dashboard = () => (
  <div>
    <Sidebar />
  </div>
);