GitHub does not have a "create folder" button, but you can create folders using a simple trick: click Add file, then Create new file, and type a folder name followed by a slash (/) in the filename field. GitHub instantly creates the folder. You can nest folders by typing multiple slashes, like src/components/Button.tsx. This works entirely in the browser — no terminal needed.
The Slash Trick — Creating Folders Directly on GitHub
GitHub does not store empty folders. In Git, folders only exist if they contain at least one file. That is why there is no "create folder" button on the GitHub website. Instead, you create a folder by creating a file inside it — and GitHub provides a clever shortcut to make this easy. When you type a slash (/) in the filename field, GitHub splits the text: everything before the slash becomes a folder name, and you keep typing the rest of the filename. This is often called the "slash trick" and it works for creating deeply nested structures in one step. For example, typing "src/components/ui/Button.tsx" creates three nested folders and a file. Understanding folder organization is especially important if you are connecting your repo to AI tools like Cursor or Lovable, which expect specific folder structures (like src/components/ for React projects).
Prerequisites
- A free GitHub account (sign up at github.com)
- A repository where you have write access
- A plan for how you want to organize your project files
Step-by-step guide
Open your repository and click Create new file
Open your repository and click Create new file
Go to your repository on github.com. Click the green "Add file" button near the top-right of the file list. Select "Create new file" from the dropdown menu. GitHub opens a new page with an empty filename field at the top and an empty editor below it.
Expected result: You see an empty filename field with a blinking cursor and an empty code editor below it.
Type your folder name followed by a slash
Type your folder name followed by a slash
In the filename field, type the name of the folder you want to create, then type a forward slash (/). Watch what happens: GitHub immediately converts the text before the slash into a folder label in the breadcrumb path above the filename field. The filename field is now empty again, ready for you to type the next part. For example, type "docs/" and you see the breadcrumb change to "your-repo / docs / (filename field)."
Expected result: The breadcrumb path shows your new folder(s) and the filename field is ready for the file name.
Add a file inside the new folder
Add a file inside the new folder
Every folder needs at least one file. Type a filename like "README.md" or ".gitkeep" in the filename field. In the editor below, add some content. For a README.md, type a heading like "# Components" or a brief description of what this folder will contain. A .gitkeep file can be left empty — it is a convention used to track otherwise-empty folders in Git.
Expected result: You have a complete file path showing in the breadcrumb (e.g., your-repo / docs / README.md) with content in the editor.
Commit the new folder and file
Commit the new folder and file
Click the green "Commit changes..." button in the top-right. In the dialog, write a commit message like "Add docs folder with README" or "Create component folder structure." Make sure "Commit directly to the main branch" is selected (or create a branch if you prefer). Click "Commit changes."
Expected result: GitHub creates the folder and file. You are redirected to the new file inside the new folder.
Move existing files into folders using github.dev (optional)
Move existing files into folders using github.dev (optional)
If you have files at the repo root that should be in a folder, press the period key (.) on your repo page to open github.dev. In the file explorer sidebar, right-click a file and select "Cut." Right-click the target folder and select "Paste." Or simply drag files between folders in the sidebar. When finished, click the Source Control icon in the left sidebar, type a commit message, and click the checkmark to commit your moves.
Expected result: Files are moved to their new folder locations in a single commit.
Complete working example
1# Project Structure23This repository follows a standard web project layout:45```6/7├── src/ # Source code8│ ├── components/ # Reusable UI components9│ │ └── ui/ # Base design system components10│ ├── pages/ # Page-level components11│ ├── hooks/ # Custom React hooks12│ ├── utils/ # Helper functions13│ └── config/ # Configuration files14├── public/ # Static assets served as-is15│ └── images/ # Image files16├── docs/ # Documentation and specs17├── design/ # Design files and mockups18└── supabase/ # Supabase configuration19 └── functions/ # Edge Functions20```2122## Conventions2324- Use lowercase folder names with hyphens25- Each folder has a README.md explaining its purpose26- Code folders mirror the structure expected by the frameworkCommon mistakes when organizing Folders Inside a GitHub Repository
Why it's a problem: Trying to create an empty folder without any file inside it
How to avoid: Git does not track empty folders. Always create at least one file inside the folder — use .gitkeep or README.md as a placeholder.
Why it's a problem: Using spaces or special characters in folder names
How to avoid: Stick to lowercase letters, numbers, and hyphens. Spaces in folder names cause issues with many tools and frameworks.
Why it's a problem: Creating a deeply nested structure that is hard to navigate
How to avoid: Keep nesting to 3-4 levels maximum. Flat structures are easier to navigate, especially for non-technical team members.
Why it's a problem: Moving files without updating import paths in code
How to avoid: If you move a code file, search for any lines that import it (using github.dev search with Ctrl+Shift+F) and update the paths to match the new location.
Best practices
- Use lowercase folder names with hyphens (e.g., my-components, not MyComponents or My Components).
- Add a README.md inside each major folder explaining what it contains.
- Follow the folder conventions of your framework (src/components/ for React, pages/ for Next.js).
- Keep the root level of your repo clean — most files should live inside folders.
- Limit folder nesting to 3-4 levels to keep paths manageable.
- Use .gitkeep files to preserve empty folders that will be filled later.
- Plan your folder structure before you start building — reorganizing later is more work.
Still stuck?
Copy one of these prompts to get a personalized, step-by-step explanation.
I am building a React web app and need help organizing my GitHub repository. What folder structure should I use for components, pages, utilities, and configuration files?
Frequently asked questions
Can I create a folder without the slash trick?
The slash trick is the only way to create folders through the GitHub web interface. You can also use github.dev (press the period key) which has a right-click menu with a "New Folder" option in the file explorer sidebar.
What happens if I delete the only file in a folder?
The folder disappears. Git does not track empty folders, so if you delete the last file in a folder, the folder is removed from the repository. To keep it, add a .gitkeep file.
Can I rename a folder on GitHub?
There is no direct rename option. The easiest approach is to use github.dev (press the period key), then drag files from the old folder to a new folder with the desired name, and delete the old folder's files.
Does folder structure matter for AI tools like Lovable or V0?
Yes. Lovable expects src/components/, src/pages/, and supabase/functions/ folders. V0 generates Next.js projects with app/ and components/ folders. Using the correct structure helps these tools understand and modify your code.
Can I upload a folder from my computer to GitHub?
Yes. When you drag a folder from your file explorer into the GitHub upload zone, it preserves the folder structure and uploads all contained files.
Can RapidDev help me restructure my GitHub repository?
Yes. RapidDev helps non-technical founders organize their repositories with the correct folder structure for their framework, set up proper conventions, and ensure compatibility with AI tools like Lovable and Cursor.
Talk to an Expert
Our team has built 600+ apps. Get personalized help with your project.
Book a free consultation