Customizing component names and structure in V0

Why V0 generates generic component names and flat file structures

V0 creates components based on your prompt description and generates names from the prompt context. When you iterate on the same component across multiple prompts, V0 often appends numbers (HeroSection, HeroSection2) or uses overly generic names (MyComponent, ContentBlock). The file structure is usually flat — all components land in /components at the root level. As your project grows beyond a few pages, this makes it difficult to find and maintain components. Renaming and reorganizing early prevents confusion and import errors later, especially when collaborating with other developers or exporting to GitHub.

• V0 names components based on prompt keywords, resulting in generic or duplicated names
• Multiple iterations on the same component create numbered variants like Card1, Card2
• All components are placed in a flat /components directory regardless of feature or page
• V0 does not enforce naming conventions — PascalCase, camelCase, and kebab-case are mixed
• Exporting to GitHub with inconsistent names makes the codebase hard to understand for other developers

Error messages you might see

Before you start

• A V0 project with components you want to rename or reorganize
• Access to the V0 code editor and file explorer
• Basic understanding of import/export syntax in TypeScript

How to fix it

// components/Card1.tsx
export function Card1() {
  return (
    <div className="rounded-lg border p-6">
      <h3>Premium Plan</h3>
      <p>$29/month</p>
    </div>
  );
}

// components/pricing-card.tsx
export function PricingCard() {
  return (
    <div className="rounded-lg border p-6">
      <h3>Premium Plan</h3>
      <p>$29/month</p>
    </div>
  );
}

// app/pricing/page.tsx — old import
import { Card1 } from "@/components/Card1";
export default function PricingPage() {
  return <Card1 />;
}

// app/pricing/page.tsx — updated import
import { PricingCard } from "@/components/pricing-card";
export default function PricingPage() {
  return <PricingCard />;
}

// Flat structure — hard to navigate
components/
  hero-section.tsx
  feature-grid.tsx
  pricing-card.tsx
  login-form.tsx
  signup-form.tsx
  dashboard-header.tsx
  dashboard-sidebar.tsx
  ui/button.tsx
  ui/card.tsx

// Feature-based structure — organized and scalable
components/
  marketing/
    hero-section.tsx
    feature-grid.tsx
    pricing-card.tsx
  auth/
    login-form.tsx
    signup-form.tsx
  dashboard/
    dashboard-header.tsx
    dashboard-sidebar.tsx
  ui/
    button.tsx
    card.tsx

// Prompt without naming guidance:
// "Create a testimonial section"

// Prompt with naming guidance:
// "Create a testimonial section. Name the component TestimonialCarousel
// and save it to components/marketing/testimonial-carousel.tsx.
// Follow the same naming convention as @components/marketing/hero-section.tsx"

Complete code example

1import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
2import { Button } from "@/components/ui/button";
3import { Badge } from "@/components/ui/badge";
4import { Check } from "lucide-react";
5
6interface PricingCardProps {
7  name: string;
8  price: number;
9  description: string;
10  features: string[];
11  popular?: boolean;
12}
13
14export function PricingCard({
15  name,
16  price,
17  description,
18  features,
19  popular = false,
20}: PricingCardProps) {
21  return (
22    <Card className={popular ? "border-primary shadow-lg" : ""}>
23      <CardHeader>
24        <div className="flex items-center justify-between">
25          <CardTitle>{name}</CardTitle>
26          {popular && <Badge>Popular</Badge>}
27        </div>
28        <p className="text-sm text-muted-foreground">{description}</p>
29        <p className="text-3xl font-bold mt-2">${price}/mo</p>
30      </CardHeader>
31      <CardContent className="space-y-4">
32        <ul className="space-y-2">
33          {features.map((feature) => (
34            <li key={feature} className="flex items-center gap-2 text-sm">
35              <Check className="h-4 w-4 text-primary" />
36              {feature}
37            </li>
38          ))}
39        </ul>
40        <Button className="w-full" variant={popular ? "default" : "outline"}>
41          Get Started
42        </Button>
43      </CardContent>
44    </Card>
45  );
46}

Best practices to prevent this

• Use PascalCase for component names (PricingCard) and kebab-case for file names (pricing-card.tsx)
• Group components into feature directories (marketing/, auth/, dashboard/) under /components
• Keep shadcn/ui components in /components/ui and never rename them — other tools expect the standard paths
• Use global search (Shift+Cmd+F) to find all references before renaming any component
• Define TypeScript interfaces for component props using descriptive names like PricingCardProps
• Include naming instructions in V0 prompts to ensure new components follow your project conventions
• Add barrel exports (index.ts) to feature directories for cleaner import paths
• Review component names before exporting to GitHub — clean names make the repository more professional

Still stuck?

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

Explore related guides

Guides from other topics that help with this issue