.gif)
Discover why component naming matters in Lovable prompts—learn to assign custom names and master best naming practices for clarity and efficiency.
Book a call with an Expert
Starting a new venture? Need to upgrade your web app? RapidDev builds application with your growth in mind.
A component name must be provided in the Lovable prompt because Lovable’s chat-first editor does not have a terminal or global refactor tools: explicit names give the chat engine a stable handle (file name, export identifier, header marker) so edits, previews, and future regenerations update the correct file instead of creating duplicates or breaking imports.
.png)
.png)
// Prompt A: Add a Lovable component-name header to every component file so future chat edits can find and update the file.
// Task: For each React/Vue/Svelte component under src/components (example paths: src/components/*.tsx, src/components/**/*.tsx),
// add or correct the top-of-file marker comment: // LOVABLE_COMPONENT_NAME: ComponentName
// If the file already exports a default function/class/component, ensure the marker matches the exported identifier and update the file header only (do not rename files).
// Save edits as file diffs. List all files changed in the reply.
// Prompt B: Create a simple registry file to map LOVABLE_COMPONENT_NAME markers to paths.
// Task: Create or update src/components/registry.ts with an exported object listing each component marker and its relative file path.
// Do not change runtime logic beyond exporting the mapping. If any component files are missing the marker, add them as per Prompt A first.
// Show the exact content of src/components/registry.ts after changes and the list of modified files.
This prompt helps an AI assistant understand your setup and guide you through the fix step by step, without assuming technical knowledge.
Add a runtime display name and update the component’s exports/imports inside Lovable using chat edits: modify the component file to set Component.displayName, update your barrel export (e.g., src/components/index.ts), and ask Lovable to update import sites across the project. Then Preview to verify and Publish or sync to GitHub if you need local terminal work.
// Please update src/components/Button.tsx
// Goal: give this component a custom public name "PrimaryButton" while keeping the filename.
// Replace the current component definition with the version below or insert the displayName assignment
// Do not change other unrelated code.
import React from 'react';
const Button: React.FC<{children?: React.ReactNode}> = ({ children }) => {
return <button className="btn">{children}</button>;
};
// Set a runtime display name so dev tools and component registries see the custom name
Button.displayName = 'PrimaryButton';
export default Button;
// Please update src/components/index.ts
// Ensure this file exports the component under the custom name "PrimaryButton"
// Create the file if it doesn't exist.
export { default as PrimaryButton } from './Button';
// Please search & replace across the repo (all src/** files):
// Replace imports that look like: import Button from '.../components/Button';
// With the new named export style: import { PrimaryButton } from '.../components';
// Also handle relative paths such as './components/Button' or '../components/Button'.
// Update usages from <Button ... /> to <PrimaryButton ... /> where applicable.
Connect with our team to unlock the full potential of no-code solutions with a no-commitment consultation!
.svg)
Use a consistent, descriptive naming convention (prefer PascalCase for React components), keep filenames matching the exported component name, prefer named exports with an index.ts re-export per folder, add displayName for wrapped/anonymous components, and use clear suffixes (e.g., Button.Primary or PrimaryButton) to express intent. These rules make imports predictable, improve editor/DevTools visibility in Lovable Preview, and reduce breakage when Lovable syncs to GitHub or you export to run codemods locally.
Prompt A — Apply PascalCase + filename = component name and add index re-exports across src/components
// Please scan src/components recursively and perform these changes.
// 1) For every component file that exports a React component, rename the file so the filename matches the component's PascalCase name.
// 2) Update the exported component declaration inside the file to use a named export matching the filename.
// 3) Create or update an index.ts in each component folder to re-export the named component.
// Apply safe text edits and update all imports across src/** to match the new names.
// Examples below show before/after and should guide the edits.
// Example BEFORE:
// src/components/button.tsx
// export default function button(props) { return <button {...props}/> }
// Example AFTER:
// src/components/Button/Button.tsx
// // export a named component whose name matches the file
// export function Button(props: any) { return <button {...props}/> }
// src/components/Button/index.ts
// export { Button } from './Button'
// Update imports:
// // BEFORE: import Button from 'src/components/button'
// // AFTER: import { Button } from 'src/components/Button'
Prompt B — Add displayName for wrapped or anonymous components
// Search for higher-order components or default-export anonymous functions in src/**.
// For each wrapped/default anonymous export, edit the file to add a named function or attach displayName.
// Example change to apply:
// BEFORE:
// export default withAuth((props) => { return <div/> })
// AFTER:
// function WrappedComponent(props: any) { return <div/> }
// WrappedComponent.displayName = 'WrappedComponent'
// export default withAuth(WrappedComponent)
// Make these edits in place for each matching file.
Prompt C — Update route and test imports
// After renames above, update any imports in these paths:
// - src/pages/**
// - src/routes/**
// - src/**/*.test.{ts,tsx}
// Replace old import paths like 'src/components/button' with '{ ComponentName } from "src/components/ComponentName"'
// Apply changes as project-wide text edits and show a preview of changed files before saving.
If this repo is very large and you expect many cross-file renames, note: large codemods may be easier outside Lovable. Use GitHub sync/export and run a codemod locally (outside Lovable, terminal required) — only do that if the in-Lovable preview shows too many conflicts.
From startups to enterprises and everything in between, see for yourself our incredible impact.
They do complex work on extremely fast timelines and effectively manage the testing and pre-launch process to deliver the best possible product. I'm extremely impressed with their execution ability.
