# Customizing Component Names Generated by Lovable AI - Tool: Lovable - Difficulty: Intermediate - Fix time: ~5 min - Compatibility: All Lovable projects - Last updated: March 2026 ## TL;DR Lovable assigns default component and file names that may not match your naming conventions. Rename components by prompting Lovable with specific names in your request, adding naming rules to your AGENTS.md file, and using @file references to direct changes to correctly named files. When renaming existing components, Lovable automatically updates all imports across your project. ## Why Lovable generates generic component names When you prompt Lovable to create a feature, the AI picks component names based on what it thinks is most descriptive. A prompt like 'add a card showing user stats' might produce a component called UserStatsCard.tsx, StatsDisplay.tsx, or simply Card.tsx depending on context. The AI does not know your naming conventions unless you tell it. Generic names become a problem as your project grows. If you have three different card components all named similarly, it is hard to tell them apart. Worse, if the AI creates a new component with the same name as an existing one, it may overwrite the original. Clear, consistent naming makes your project navigable for both humans and the AI. Lovable follows naming instructions well when they are explicit. If you say 'create a component called DashboardMetricsPanel in src/components/dashboard/DashboardMetricsPanel.tsx,' the AI will use that exact name and path. The key is being specific in every prompt. - Prompts describe what the component should do but not what it should be named - No AGENTS.md file with naming conventions for the AI to follow - The AI generates names based on its own interpretation of the feature description - Existing components have inconsistent naming patterns, so the AI has no convention to follow - Renaming was attempted manually but imports across the project were not updated ## Error messages you might see **Cannot find module '@/components/OldComponentName'** A component was renamed but the import statement in another file still references the old name. Ask Lovable to update all imports that reference the old component name. **'ComponentName' is not exported from '@/components/ComponentName'** The file exists but the exported function or constant name does not match the import. This happens when the file was renamed but the export inside it was not updated. Check that the export name matches. **Duplicate identifier 'ComponentName'** Two different files export a component with the same name. TypeScript cannot resolve which one to use. Rename one of the components to something unique. ## Before you start - A Lovable project with components you want to rename or naming conventions you want to enforce - A naming convention in mind (PascalCase for components is the React standard) - Access to the Lovable editor for prompting or Dev Mode for direct file editing ## How to fix it ### 1. Specify exact component names in your Lovable prompts *Explicit names in prompts override the AI's default naming behavior completely* When asking Lovable to create a new component, include the exact file name and component name in your prompt. Use the full path including the directory. This removes all ambiguity and ensures the AI creates the file exactly where you want with the name you want. Before: ``` // Vague prompt — AI picks its own name: // "Add a sidebar navigation component" ``` After: ``` // Specific prompt — you control the name: // "Create a component called AppSidebar in // @src/components/layout/AppSidebar.tsx. // It should contain navigation links for // Home, Dashboard, and Settings." ``` **Expected result:** Lovable creates src/components/layout/AppSidebar.tsx with the component named AppSidebar exactly as specified. ### 2. Add naming conventions to AGENTS.md *AGENTS.md rules persist across sessions, so the AI follows your naming conventions automatically* Add a Naming Conventions section to your AGENTS.md file. Specify the naming pattern for components, pages, hooks, utilities, and types. Include examples so the AI has concrete references. The AI reads AGENTS.md at the start of every session and applies these rules to all generated code. Before: ``` // No naming conventions defined // AI uses its own naming for every new component ``` After: ``` # AGENTS.md — Naming Conventions ## Component Naming: - PascalCase for all component names and filenames - Prefix with the feature area: DashboardMetrics, DashboardFilters - Page components go in src/pages/ with the suffix Page: DashboardPage.tsx - Layout components go in src/components/layout/ - Feature components go in src/components/[feature]/ ## Examples: - Dashboard stat card → src/components/dashboard/DashboardStatsCard.tsx - User profile form → src/components/user/UserProfileForm.tsx - Auth hook → src/hooks/useAuth.ts - API utility → src/lib/api.ts ``` **Expected result:** Future prompts produce components with consistent names following your conventions without you having to specify them each time. ### 3. Rename an existing component and update all imports *Renaming without updating imports breaks the entire application with module-not-found errors* To rename an existing component, prompt Lovable to handle the rename and all import updates in one step. The AI will rename the file, update the export name inside it, and find every file that imports the old name to update the import path. Do not rename files manually in Dev Mode without also updating imports, as this will break your app. Before: ``` // Current: src/components/Card.tsx (too generic) // Imported in 5 other files as: // import Card from "@/components/Card"; ``` After: ``` // Prompt to Lovable: // "Rename @src/components/Card.tsx to // @src/components/dashboard/MetricsCard.tsx. // Update the component name from Card to MetricsCard. // Update all imports across the project that reference // the old name." ``` **Expected result:** The file is moved to the new path, the component is renamed, and all 5 importing files now reference @/components/dashboard/MetricsCard. ### 4. Organize components into feature-based directories *Flat component directories become unmanageable beyond 20-30 files — subdirectories keep things organized* If your src/components/ directory has become a flat list of many files, ask Lovable to reorganize them into feature-based subdirectories. Group related components together: layout components in layout/, dashboard components in dashboard/, auth components in auth/. This makes the codebase navigable. If the reorganization involves updating imports across many files, RapidDev's engineers have restructured component directories across 600+ Lovable projects and can handle it safely. Before: ``` // src/components/ (flat, hard to navigate) // Card.tsx // Header.tsx // Sidebar.tsx // UserForm.tsx // UserAvatar.tsx // DashboardStats.tsx // DashboardChart.tsx ``` After: ``` // src/components/ (organized by feature) // layout/ // Header.tsx // Sidebar.tsx // dashboard/ // DashboardStats.tsx // DashboardChart.tsx // user/ // UserForm.tsx // UserAvatar.tsx ``` **Expected result:** Components are grouped by feature. All imports across the project are updated to reference the new paths. ## Complete code example File: `AGENTS.md` ```markdown # Component Naming and Structure Guide ## File Naming Rules - Components: PascalCase matching the exported name (UserProfileCard.tsx) - Hooks: camelCase prefixed with 'use' (useAuth.ts, useFetchData.ts) - Utilities: camelCase (formatDate.ts, validateEmail.ts) - Types: PascalCase with suffix (UserTypes.ts, ApiResponse.ts) - Constants: camelCase file, UPPER_SNAKE_CASE values (constants.ts) ## Directory Structure - src/components/layout/ — App shell (Header, Sidebar, Footer) - src/components/ui/ — shadcn/ui base components (DO NOT rename these) - src/components/[feature]/ — Feature-specific components - src/pages/ — Page-level components with 'Page' suffix - src/hooks/ — Custom React hooks - src/lib/ — Utility functions and API clients - src/types/ — TypeScript type definitions ## Naming Patterns - Prefix components with their feature area: DashboardStats, UserProfile - Use descriptive names over generic ones: PaymentHistoryTable over Table - Suffix form components with Form: ContactForm, LoginForm - Suffix modal components with Modal or Dialog: ConfirmDeleteDialog - Suffix page components with Page: SettingsPage, DashboardPage ## When Creating New Components - Always use the naming pattern above - Place in the correct feature subdirectory - If the subdirectory does not exist, create it - Use named exports: export const ComponentName = () => { } ``` ## Best practices - Always specify exact component names and file paths in your Lovable prompts — never leave naming to the AI - Use PascalCase for component names and filenames — this is the React community standard - Add a naming conventions section to AGENTS.md so the AI follows your rules in every session - Prefix components with their feature area (DashboardStats, UserAvatar) to make them unique and searchable - Group related components into subdirectories under src/components/ instead of using a flat structure - When renaming, always ask Lovable to update all imports in a single prompt — never rename files without updating imports - Do not rename files in src/components/ui/ — these are shadcn/ui base components and renaming them breaks auto-generated code - Use the @file syntax when renaming: 'Rename @src/components/Card.tsx to @src/components/dashboard/MetricsCard.tsx' ## Frequently asked questions ### How do I control what Lovable names my components? Include the exact component name and file path in your prompt. For example: 'Create a component called DashboardMetricsCard in @src/components/dashboard/DashboardMetricsCard.tsx.' The AI will use the name you specify instead of generating its own. ### Can I rename a component after Lovable creates it? Yes. Prompt Lovable to rename the file and update all imports in one step: 'Rename @src/components/Card.tsx to DashboardMetricsCard.tsx and update all imports.' The AI handles the file rename and import updates across your entire project. ### What naming convention should I use for React components? Use PascalCase for component names and filenames (UserProfile.tsx, DashboardStats.tsx). Prefix with the feature area to keep names unique. Use camelCase for hooks (useAuth.ts) and utilities (formatDate.ts). Add these rules to AGENTS.md. ### Will renaming break my Lovable app? Only if imports are not updated. When you ask Lovable to rename a component, it automatically finds and updates all imports. If you rename manually in Dev Mode, you must also manually update every import, or the app will show module-not-found errors. ### Should I rename the shadcn/ui components in src/components/ui/? No. The files in src/components/ui/ are base components from shadcn/ui. Renaming them will break Lovable's ability to generate code that uses those components. Only rename your own custom components. ### What if I can't fix this myself? If your project has many components with generic names and renaming them involves updating dozens of imports across files, RapidDev's engineers can handle the full restructuring. They have reorganized component naming for 600+ Lovable projects. --- Source: https://www.rapidevelopers.com/lovable-issues/customizing-component-names-generated-by-lovable © RapidDev — https://www.rapidevelopers.com/lovable-issues/customizing-component-names-generated-by-lovable