How to restyle shadcn/ui so it doesn't look like every other site

The exact shadcn/ui variables, component files and Tailwind settings to change so your Lovable, v0 or Cursor app stops looking like the default shadcn theme.

Updated 2026-10-15 · 3 min read · by the Unslop Me team

Most AI builders, including Lovable, v0 and plenty of Cursor projects, use shadcn/ui. It's a fine choice: accessible, composable and yours to edit. But its default theme is so widespread that "neutral greys, 8px radius, black primary button, Inter" now reads as "made with a builder". You don't need a new component library. You need about six edits.

1. Replace the theme variables

shadcn components read colours from CSS variables, usually in app/globals.css (Next.js / v0) or src/index.css (Vite / Lovable). Replace the whole :root block with your palette. Here's a warm, editorial one, converted to the HSL triplet format shadcn uses:

:root {
  --background: 40 33% 93%;      /* #f4f0e8 paper */
  --foreground: 30 19% 7%;       /* #16130f ink */
  --card: 40 50% 97%;
  --card-foreground: 30 19% 7%;
  --primary: 30 19% 7%;          /* ink buttons */
  --primary-foreground: 40 33% 93%;
  --secondary: 38 26% 81%;
  --secondary-foreground: 30 19% 7%;
  --muted: 38 26% 88%;
  --muted-foreground: 34 7% 39%;
  --accent: 14 100% 55%;         /* #ff4d1c */
  --accent-foreground: 0 0% 100%;
  --border: 38 26% 81%;
  --input: 38 26% 81%;
  --ring: 14 100% 55%;
  --radius: 0.125rem;
}

If your file uses oklch() values (newer shadcn versions), ask your builder to convert the hex values into that format instead.

2. Change the radius on purpose

--radius: 0.5rem is the default and it's everywhere. Pick a direction: sharp (0), crisp (0.125rem) or soft (0.75rem) and apply it consistently. Sharp corners with 1.5px borders feel editorial; soft corners with no borders feel friendly. The default in-between is what reads as generic.

3. Swap the fonts

shadcn doesn't choose a font, but nearly every template pairs it with Inter or Geist. Add a display face for headings (12 pairings) and set it on h1, h2, h3 in your global CSS.

4. Edit Button

components/ui/button.tsx defines the variants with cva. Useful changes:

• Remove shadow / shadow-sm from the default variant.
• Increase padding (h-11 px-6) for a more confident button.
• Make the link variant underlined with an offset: underline underline-offset-4 decoration-2.
• Add a hover that changes colour rather than opacity: hover:bg-accent hover:text-accent-foreground.

Prompt:

Edit components/ui/button.tsx only. Default variant: bg-primary text-primary-foreground, no shadow, hover:bg-accent hover:text-accent-foreground, h-11 px-6, font-semibold. Outline variant: border-[1.5px] border-foreground bg-transparent. Link variant: underline underline-offset-4 decoration-2. Keep all props and exports.

5. Edit Card, Badge and Input

• Card: replace shadow-sm with a 1.5px border in --foreground or --border; increase padding to 28px. Cards without shadows look much less templated.
• Badge: default badges are rounded-full pills. Make them square, uppercase, 11px monospace with letter-spacing 0.1em; they become labels instead of pills.
• Input: a 1.5px border and a bigger height (48px) make forms feel deliberate.

6. Check what else uses the defaults

Search the codebase for classes that bypass your tokens: bg-white, text-gray-, text-slate-, bg-indigo-, from-, backdrop-blur, rounded-xl, rounded-2xl, rounded-full. Replace them with token classes (bg-background, text-muted-foreground, border-border).

Search the project for bg-white, text-gray-*, text-slate-*, bg-indigo-*, bg-violet-*, bg-purple-*, gradient classes, backdrop-blur, rounded-xl, rounded-2xl and rounded-full. Replace each with the theme token equivalent (bg-background, bg-card, text-foreground, text-muted-foreground, border-border, rounded-[var(--radius)]). Remove gradients and blur. Change styling only.

What it looks like when it's done

A useful test: take a screenshot of your landing page and of the shadcn docs site and put them side by side. If they look like siblings, keep going. Things that usually make the biggest visible difference, in order:

1. Background that isn't pure white or zinc-950.
2. A display font on headings.
3. Borders instead of shadows on cards.
4. Primary buttons that aren't the default black or indigo with rounded-md.
5. Badges as square labels instead of pills.

You can usually get through all five in under an hour. Keep the component APIs exactly as they are, so nothing in the app's logic needs to change.

Keep it from drifting back

Put the rules somewhere your builder reads every time: v0 project instructions, a Lovable knowledge file, or a Cursor rules file. Then scan your deployed site to confirm the stock palette and font tells are gone, and compare with real builds on the Slop Leaderboard. The v0 design system prompts guide covers the same ground step by step for v0.

FAQ