Make a v0 app look less AI-generated, in code

Most v0 apps look alike because they keep the same defaults: shadcn's neutral tokens, Geist for everything, a centered gradient hero, three icon cards and a dashboard of four Cards. Here are the files that change that: new theme tokens for Tailwind v4, two typefaces with next/font, a left-aligned hero, a fact row in place of the icon cards, and Analytics Dashboard V1 in place of the stock dashboard.

One payment$9

By buying you agree to the Terms.

One payment, no subscription
Download right after paying
Use it in client projects
Won't run on the listed stack? We fix it or refund you

Ready forCursorv0Lovableshadcn CLI

Full product pageReact · Tailwind · TypeScript

Step 1: replace shadcn's default tokens

app/globals.css

@import "tailwindcss";

@custom-variant dark (&:is(.dark *));

/* The values v0 ships are shadcn's neutral defaults. Change these and the
   whole app stops looking like every other v0 app. */
:root {
  --radius: 0.375rem;              /* default is 0.625rem: smaller corners read less "template" */
  --background: oklch(0.985 0.008 85);   /* warm paper instead of pure white */
  --foreground: oklch(0.22 0.02 260);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.22 0.02 260);
  --muted: oklch(0.95 0.01 85);
  --muted-foreground: oklch(0.48 0.02 260);
  --primary: oklch(0.55 0.19 32);        /* one real brand colour, here a brick red */
  --primary-foreground: oklch(0.99 0 0);
  --accent: oklch(0.93 0.05 90);
  --accent-foreground: oklch(0.25 0.03 60);
  --border: oklch(0.88 0.015 85);
  --ring: oklch(0.55 0.19 32);
}

.dark {
  --background: oklch(0.17 0.015 260);   /* blue black, not #0a0a0a */
  --foreground: oklch(0.95 0.01 85);
  --card: oklch(0.21 0.018 260);
  --card-foreground: oklch(0.95 0.01 85);
  --muted: oklch(0.26 0.02 260);
  --muted-foreground: oklch(0.7 0.02 260);
  --primary: oklch(0.7 0.17 40);
  --primary-foreground: oklch(0.17 0.015 260);
  --accent: oklch(0.3 0.04 260);
  --accent-foreground: oklch(0.95 0.01 85);
  --border: oklch(0.3 0.02 260);
  --ring: oklch(0.7 0.17 40);
}

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-border: var(--border);
  --color-ring: var(--ring);
  --radius-sm: calc(var(--radius) - 2px);
  --radius-md: var(--radius);
  --radius-lg: calc(var(--radius) + 2px);
  --radius-xl: calc(var(--radius) + 6px);
  /* two typefaces with different jobs, set in app/layout.tsx */
  --font-sans: var(--font-plex-sans);
  --font-display: var(--font-fraunces);
  --font-mono: var(--font-plex-mono);
}

body {
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font-sans);
}

app/layout.tsx

import type { Metadata } from "next";
import { Fraunces, IBM_Plex_Sans, IBM_Plex_Mono } from "next/font/google";
import "./globals.css";

// v0 starts every app on Geist. A display face for headings and a plain face
// for text is the quickest way to stop looking like the default.
const display = Fraunces({ subsets: ["latin"], variable: "--font-fraunces", axes: ["opsz"] });
const body = IBM_Plex_Sans({ subsets: ["latin"], weight: ["400", "500", "600"], variable: "--font-plex-sans" });
const numbers = IBM_Plex_Mono({ subsets: ["latin"], weight: ["400", "500"], variable: "--font-plex-mono" });

export const metadata: Metadata = { title: "Acme Analytics" };

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en" className={`${display.variable} ${body.variable} ${numbers.variable}`}>
      <body className="antialiased">{children}</body>
    </html>
  );
}

Good to know

Change the token values, not the class names. v0's components already use bg-primary, text-muted-foreground and rounded-md, so new values in :root and .dark restyle every screen at once and the next v0 edit keeps them.
The colors above are an example: a warm paper background, a blue black dark mode and one brick red accent. Pick your own, but keep it to one accent. A second bright color is usually where it starts looking generated again.
next/font loads the three faces at build time and hands each one a CSS variable on <html>. The @theme block maps those variables to font-sans, font-display and font-mono, so font-display works as a normal Tailwind class.
Keep the next/font variable names different from the theme names (--font-fraunces, not --font-display). A variable that points at itself is invalid CSS, and the font silently falls back.
Type-checked on October 26, 2026 with TypeScript 5.9.3 against next 15.5.28 and react 19.1.1, and the dashboard page against the shipped AnalyticsDashboard.tsx. A next/font variable without the leading -- fails that check, and so does dashboard data with a missing field. globals.css compiled with Tailwind CSS 4.3.3 and the hero classes came out as expected. We didn't render these pages in a browser.

Step 2: a hero that isn't centered

The default v0 hero is centered text, a gradient headline, two equal buttons and a blur behind it. This one sits on a 7 and 5 column grid: the headline on the left in the display face, one filled button and a text link, and a real screenshot of your app on the right, pushed down a little so the two columns don't line up.
Write the headline about what the product does for someone. A screenshot of the real app does more than any illustration.

components/hero.tsx

import Link from "next/link";

// The v0 hero: centered, gradient text, two buttons, a blurred blob behind it.
// This one is left aligned on a 7/5 grid, with a real product shot on the right.
export function Hero() {
  return (
    <section className="mx-auto grid max-w-6xl gap-10 px-6 pt-20 pb-16 md:grid-cols-12 md:items-end">
      <div className="md:col-span-7">
        <p className="font-mono text-xs tracking-wide text-muted-foreground uppercase">For teams that ship weekly</p>
        <h1 className="mt-4 font-display text-5xl leading-[1.05] font-semibold text-balance md:text-6xl">
          See which release moved revenue, the day it shipped.
        </h1>
        <p className="mt-5 max-w-xl text-lg text-muted-foreground">
          Acme lines up your deploys with your Stripe numbers, so the Monday meeting starts with an answer.
        </p>
        <div className="mt-8 flex items-center gap-5">
          <Link href="/signup" className="rounded-md bg-primary px-5 py-3 text-sm font-medium text-primary-foreground">
            Start with your own data
          </Link>
          <Link href="/demo" className="text-sm font-medium underline underline-offset-4">
            Watch a 2 minute demo
          </Link>
        </div>
      </div>
      <figure className="md:col-span-5 md:translate-y-8">
        {/* a real screenshot of your app beats an illustration */}
        <img src="/dashboard.png" alt="Acme dashboard with revenue by release" className="w-full rounded-lg border shadow-sm" />
      </figure>
    </section>
  );
}

Step 3: drop the three icon cards

Three cards with an icon in a rounded square, a bold title and two lines of text is the most recognisable block in generated pages. Swap it for one row of facts with uneven column widths, set in the mono face with tabular numbers.
Use numbers you can stand behind. The ones below are placeholders for the example app.

components/proof-row.tsx

// Instead of three cards with an icon in a rounded square: one row of facts,
// set in the numbers face, with uneven widths. Fill it with your real numbers.
const facts = [
  { value: "41", unit: "min", label: "from deploy to the first revenue read" },
  { value: "3", unit: "clicks", label: "to connect Stripe and GitHub" },
  { value: "2019", unit: "", label: "the oldest release we have imported for a customer" },
];

export function ProofRow() {
  return (
    <dl className="mx-auto grid max-w-6xl gap-px overflow-hidden border-y bg-border px-0 md:grid-cols-[2fr_1fr_1.5fr]">
      {facts.map((f) => (
        <div key={f.label} className="bg-background px-6 py-8">
          <dt className="text-sm text-muted-foreground">{f.label}</dt>
          <dd className="mt-2 font-mono text-4xl tabular-nums">
            {f.value}
            {f.unit ? <span className="ml-1 text-base text-muted-foreground">{f.unit}</span> : null}
          </dd>
        </div>
      ))}
    </dl>
  );
}

Step 4: motion only where something changes

Fading every section in on scroll is the other tell. Animate the things that actually change: a number arriving, a toggle, a delete. This CountUp has no dependency and skips the animation for people who ask for reduced motion.

components/count-up.tsx

"use client";
import { useEffect, useRef, useState } from "react";

// One number that counts up when it scrolls into view. No animation library.
// People with reduced motion get the final number straight away.
export function CountUp({ to, ms = 900, format = (n: number) => Math.round(n).toLocaleString() }: { to: number; ms?: number; format?: (n: number) => string }) {
  const ref = useRef<HTMLSpanElement>(null);
  const [value, setValue] = useState(0);

  useEffect(() => {
    const el = ref.current;
    if (!el) return;
    if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
      setValue(to);
      return;
    }
    let raf = 0;
    const io = new IntersectionObserver(([entry]) => {
      if (!entry.isIntersecting) return;
      io.disconnect();
      const t0 = performance.now();
      const tick = (now: number) => {
        const p = Math.min(1, (now - t0) / ms);
        setValue(to * (1 - Math.pow(1 - p, 3)));
        if (p < 1) raf = requestAnimationFrame(tick);
      };
      raf = requestAnimationFrame(tick);
    });
    io.observe(el);
    return () => {
      io.disconnect();
      cancelAnimationFrame(raf);
    };
  }, [to, ms]);

  return (
    <span ref={ref} className="tabular-nums">
      {format(value)}
    </span>
  );
}

Where Analytics Dashboard V1 fits

Ask v0 for a dashboard and you get four shadcn Cards with a number each and a Recharts area chart. Analytics Dashboard V1 replaces that whole block: a dark dashboard where revenue, orders and conversion count up, the change badges show a real minus sign for a drop, the goal ring fills, and the bar chart moves between week and month.
It takes your numbers through one data prop, so a Server Component can read them from your database or Stripe and pass them in, as below. The sample data in the file shows the shape.
It doesn't use Recharts or any chart library. The bars are drawn by the component itself.

app/dashboard/page.tsx

import AnalyticsDashboard, { type DashboardData } from "@/components/AnalyticsDashboard";

// The v0 dashboard is four shadcn Cards and a Recharts area chart. This swaps the
// whole block for Analytics Dashboard V1 and feeds it your own numbers.
async function getData(): Promise<DashboardData> {
  // read from your database or Stripe here; the shape is what the piece expects
  return {
    week: {
      revenue: 12840, orders: 311, conv: 2.9, d: [6.2, 4.1, -0.3], goal: 64,
      bars: [40, 52, 38, 61, 70, 55, 82], labels: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
    },
    month: {
      revenue: 51200, orders: 1290, conv: 3.1, d: [11.8, 9.4, 0.4], goal: 71,
      bars: [48, 57, 66, 52, 74, 69, 88], labels: ["W1", "W2", "W3", "W4", "W5", "W6", "W7"],
    },
  };
}

export default async function DashboardPage() {
  const data = await getData();
  return (
    <main className="min-h-dvh bg-background p-4 md:p-8">
      <AnalyticsDashboard data={data} title="Revenue" subtitle="Last 7 days and last 7 weeks" startDelay={150} />
    </main>
  );
}

A prompt for v0, Cursor or Lovable

If you'd rather have the tool make the changes, paste the tokens from Step 1 into the chat along with this prompt. Being specific matters: "make it look less generic" on its own tends to give you a different set of defaults.

prompt.txt

Restyle this app so it stops looking like a default v0 / shadcn app. Keep every feature and route.
1. Replace the :root and .dark values in app/globals.css with the tokens below. Do not add new colors outside them.
2. Fonts: Fraunces for h1 and h2 (font-display), IBM Plex Sans for text, IBM Plex Mono with tabular-nums for every number.
3. Hero: left aligned on a 12 column grid (text 7, product screenshot 5). No gradient text, no blurred blobs.
4. Replace any row of three icon cards with one row of real facts in the mono face.
5. Radius 0.375rem everywhere. Only one button style is filled; the second action is a text link.
6. No fade-in on scroll. Animate only things that change: numbers, toggles, a delete.

Install

Copy from the zipPut react/src/components into src/, then none for the theme files. The dashboard needs framer-motion.
Or ask your AIPaste PROMPT.md into Cursor, Lovable or v0.

Props

data: your week and month numbers: revenue, orders, conv, change %, goal, bars, labels
title / subtitle: header text
startDelay: ms before the first count-up

How qodesign compares

qodesign vs shadcnblocksshadcnblocks is best for: assembling whole pages from ready-made sections.
qodesign vs Kokonut UIKokonut UI is best for: landing page sections and templates installed by an AI agent.
qodesign vs TremorTremor is best for: dashboards and charts: area, bar, line and donut charts, trackers, KPI cards, tables.

All comparisons, with prices read on each library's own site.

From the blog: How to Make UI Not Look AI-Generated: A v0 Checklist

Questions

Why does every v0 app look the same?

Because most of them keep the same defaults: shadcn's neutral tokens, one sans-serif, a centered hero and the same card layouts. Changing the tokens and the layout of two or three blocks is usually enough to make the app look like yours.

Can I just prompt v0 to make it look less generic?

Partly. A vague prompt gets you a different default. Give it your own tokens, two named fonts and the layout rules, like the prompt on this page.

Will my changes survive the next v0 edit?

The token values will, because v0's components read them through classes like bg-primary. Layout changes can be undone by a big regeneration, so ask for small edits after you restyle.

Does Analytics Dashboard V1 work with shadcn?

Yes. It sits next to shadcn components in the same Next.js app and takes your data as a prop. It brings its own dark styling.

Does the dashboard work in Next.js?

Yes, as a client component. Keep "use client" at the top of the file that renders it, as in the snippet above. App Router and Pages Router both work.

Can Cursor or v0 add it for me?

Yes. Each download has a PROMPT.md. Paste it into Cursor, Lovable, v0 or Claude Code and it fits the piece into your app.

Can I use it in client work?

Yes, in personal and client projects. You can't resell the code itself as a kit.