Is there a convenient way to modify the theme or other configurations for a project created using https://ui.shadcn.com/create?

[AKmoex]

I used https://ui.shadcn.com/create to generate a basic template, and I developed on this basis later. However, I want to adjust the overall style now, such as changing the style. Do you have any good suggestions? It seems that switching styles and themes on the official website looks quite easy? I'm not a professional frontend developer, so I'm here to ask for some advice.

[JackyST0]

Yes! shadcn/ui makes it easy to customize themes. Here are the main ways:

1. Use the Theme Customizer

Visit https://ui.shadcn.com/themes and customize your theme visually. Then copy the CSS variables and paste them into your app/globals.css.

2. Modify CSS Variables

All theme colors are defined in globals.css. You can directly edit them:

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 222.2 84% 4.9%;
    --primary: 222.2 47.4% 11.2%;
    /* ... customize these values */
  }
  .dark {
    --background: 222.2 84% 4.9%;
    --foreground: 210 40% 98%;
    /* ... dark mode colors */
  }
}

3. Change the Base Color

If you want to switch the entire color scheme, run:

npx shadcn@latest init

And select a different base color (slate, gray, zinc, neutral, stone).

4. Customize Individual Components

Each component is in your codebase, so you can directly modify the styles in components/ui/*.tsx.

Quick Tips:

• Use HSL format for colors (shadcn uses HSL by default)
• The theme customizer at https://ui.shadcn.com/themes is the easiest way to experiment
• Check out https://ui.shadcn.com/docs/theming for detailed docs

Hope this helps!

[KeepALifeUS]

How to Modify Theme in shadcn/ui

1. Change Color Theme

Edit app/globals.css (or src/index.css):

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 222.2 84% 4.9%;
    --primary: 221.2 83.2% 53.3%; /* Change this for primary color */
    --primary-foreground: 210 40% 98%;
    /* ... other variables */
  }
  .dark {
    --background: 222.2 84% 4.9%;
    /* Dark mode colors */
  }
}

2. Use Theme Generator

Visit: https://ui.shadcn.com/themes

1. Pick a color
2. Click "Copy code"
3. Replace the CSS variables in your globals.css

3. Switch Style (Default ↔ New York)

Edit components.json:

{
  "style": "new-york", // or "default"
  "tailwind": {
    "baseColor": "zinc" // slate, gray, zinc, neutral, stone
  }
}

Then reinstall components:

npx shadcn@latest add button --overwrite

4. Quick Theme Switch

For easy switching, use the themes from the website:

• Go to https://ui.shadcn.com/themes
• Select style + color
• Copy the CSS
• Paste into your globals.css

This is the easiest way to change the entire look without deep CSS knowledge!