component-naming-and-directory-structure

---
description: Rules for naming components and structuring directories within the src/components folder, including conventions for lowercase names with dashes.
globs: src/components/**/*
---

- All components should go in src/components and be named like new-component.tsx
- Use lowercase with dashes for directories (e.g., components/auth-wizard).
- Favor named exports for components.
- Within the /src/components folder, consider organizing components by type or feature:
  - By Type: Group components like forms, buttons, layout elements, etc.
  - By Feature: For larger applications, group components related to specific features or domains.
For example:
  /src/components
  ├── /ui
  │   ├── /Button
  │   ├── /Modal
  │   └── /Card
  ├── /forms
  │   ├── /TextField
  │   └── /Select
  └── /layout
      ├── /Navbar
      └── /Footer