Customizing Component Names Generated by Lovable AI

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

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

// Vague prompt — AI picks its own name:
// "Add a sidebar navigation component"

// 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."

// No naming conventions defined
// AI uses its own naming for every new component

# 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

// Current: src/components/Card.tsx (too generic)
// Imported in 5 other files as:
// import Card from "@/components/Card";

// 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."

// src/components/ (flat, hard to navigate)
//   Card.tsx
//   Header.tsx
//   Sidebar.tsx
//   UserForm.tsx
//   UserAvatar.tsx
//   DashboardStats.tsx
//   DashboardChart.tsx

// src/components/ (organized by feature)
//   layout/
//     Header.tsx
//     Sidebar.tsx
//   dashboard/
//     DashboardStats.tsx
//     DashboardChart.tsx
//   user/
//     UserForm.tsx
//     UserAvatar.tsx

Complete code example

1# Component Naming and Structure Guide
2
3## File Naming Rules
4- Components: PascalCase matching the exported name (UserProfileCard.tsx)
5- Hooks: camelCase prefixed with 'use' (useAuth.ts, useFetchData.ts)
6- Utilities: camelCase (formatDate.ts, validateEmail.ts)
7- Types: PascalCase with suffix (UserTypes.ts, ApiResponse.ts)
8- Constants: camelCase file, UPPER_SNAKE_CASE values (constants.ts)
9
10## Directory Structure
11- src/components/layout/ — App shell (Header, Sidebar, Footer)
12- src/components/ui/ — shadcn/ui base components (DO NOT rename these)
13- src/components/[feature]/ — Feature-specific components
14- src/pages/ — Page-level components with 'Page' suffix
15- src/hooks/ — Custom React hooks
16- src/lib/ — Utility functions and API clients
17- src/types/ — TypeScript type definitions
18
19## Naming Patterns
20- Prefix components with their feature area: DashboardStats, UserProfile
21- Use descriptive names over generic ones: PaymentHistoryTable over Table
22- Suffix form components with Form: ContactForm, LoginForm
23- Suffix modal components with Modal or Dialog: ConfirmDeleteDialog
24- Suffix page components with Page: SettingsPage, DashboardPage
25
26## When Creating New Components
27- Always use the naming pattern above
28- Place in the correct feature subdirectory
29- If the subdirectory does not exist, create it
30- Use named exports: export const ComponentName = () => { }

Best practices to prevent this

• 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'

Still stuck?

Copy one of these prompts to get a personalized, step-by-step explanation.

Related error patterns