Bug: the olive base color in shadcn-vue init does not generate the CSS variables
Summary
Running shadcn-vue init and selecting the olive base color leaves the
global CSS file without the color variable block (--background, --primary,
--border, --ring, etc.). The resulting project does not build: Tailwind
fails on @apply border-border / bg-background with undefined variables.
The same problem affects the mauve, taupe and mist colors.
Environment
- CLI:
shadcn-vue@2.8.1
- Vite: 8.x
- Tailwind CSS: 4.x (via
@tailwindcss/vite)
cssVariables: true
Reproduction
- Vue + Vite project with Tailwind v4.
pnpm dlx shadcn-vue@latest init
- Select:
- base:
reka
- style:
vega
- icon library:
lucide
- font:
inter
- base color:
olive
- The init finishes "successfully", but
src/assets/main.css does not contain
the color variables (only the base style: @custom-variant dark,
@layer base, etc.).
npm run build fails: Tailwind reports unknown classes such as
border-border, bg-background, text-foreground.
Generated components.json:
{
"$schema": "https://shadcn-vue.com/schema.json",
"style": "new-york",
"font": "inter",
"typescript": true,
"tailwind": {
"config": "",
"css": "src/assets/main.css",
"baseColor": "olive",
"cssVariables": true,
"prefix": ""
},
"iconLibrary": "lucide",
"rtl": false,
"pointer": false,
"aliases": {
"components": "@/components",
"utils": "@/lib/utils",
"ui": "@/components/ui",
"lib": "@/lib",
"composables": "@/composables"
},
"registries": {}
}
Cause
In getRegistryBaseColor() the CLI downloads the palette from:
https://shadcn-vue.com/r/colors/{baseColor}.json
colors/olive.json -> 404
colors/mauve.json -> 404
colors/taupe.json -> 404
colors/mist.json -> 404
colors/neutral.json -> 200
colors/stone.json -> 200
colors/zinc.json -> 200
When the response is 404, the RegistryNotFoundError is caught and undefined
is returned silently. Then registryGetTheme() returns null and the init
omits the CSS variables block without any warning. The color is still
written to components.json ("baseColor": "olive"), but the theme is never
generated.
Additional note: the React registry (ui.shadcn.com/r/colors/olive.json) does
serve the full olive palette, which suggests the shadcn-vue registry is
outdated or not deployed yet.
Impact
init reports success but leaves the project without theming and with a
broken build.
- The CLI offers colors in the prompt that its own registry cannot serve.
Workaround
While the registry is not fixed, use an available base color (neutral,
stone, zinc) or manually inject the olive palette into main.css from
https://ui.shadcn.com/r/colors/olive.json.
Suggested fix
- Option A: make
getRegistryBaseColor() warn when the color returns 404
instead of failing silently.
- Option B: only list in the prompt the colors that actually exist in the
registry.
- Option C: deploy the
colors/{olive,mauve,taupe,mist}.json files to the
shadcn-vue registry (the palette already exists in the upstream React
registry).
Bug: the
olivebase color inshadcn-vue initdoes not generate the CSS variablesSummary
Running
shadcn-vue initand selecting theolivebase color leaves theglobal CSS file without the color variable block (
--background,--primary,--border,--ring, etc.). The resulting project does not build: Tailwindfails on
@apply border-border/bg-backgroundwith undefined variables.The same problem affects the
mauve,taupeandmistcolors.Environment
shadcn-vue@2.8.1@tailwindcss/vite)cssVariables: trueReproduction
pnpm dlx shadcn-vue@latest initrekavegalucideinterolivesrc/assets/main.cssdoes not containthe color variables (only the base style:
@custom-variant dark,@layer base, etc.).npm run buildfails: Tailwind reports unknown classes such asborder-border,bg-background,text-foreground.Generated
components.json:{ "$schema": "https://shadcn-vue.com/schema.json", "style": "new-york", "font": "inter", "typescript": true, "tailwind": { "config": "", "css": "src/assets/main.css", "baseColor": "olive", "cssVariables": true, "prefix": "" }, "iconLibrary": "lucide", "rtl": false, "pointer": false, "aliases": { "components": "@/components", "utils": "@/lib/utils", "ui": "@/components/ui", "lib": "@/lib", "composables": "@/composables" }, "registries": {} }Cause
In
getRegistryBaseColor()the CLI downloads the palette from:colors/olive.json-> 404colors/mauve.json-> 404colors/taupe.json-> 404colors/mist.json-> 404colors/neutral.json-> 200colors/stone.json-> 200colors/zinc.json-> 200When the response is 404, the
RegistryNotFoundErroris caught andundefinedis returned silently. Then
registryGetTheme()returnsnulland the initomits the CSS variables block without any warning. The color is still
written to
components.json("baseColor": "olive"), but the theme is nevergenerated.
Additional note: the React registry (
ui.shadcn.com/r/colors/olive.json) doesserve the full
olivepalette, which suggests the shadcn-vue registry isoutdated or not deployed yet.
Impact
initreports success but leaves the project without theming and with abroken build.
Workaround
While the registry is not fixed, use an available base color (
neutral,stone,zinc) or manually inject theolivepalette intomain.cssfromhttps://ui.shadcn.com/r/colors/olive.json.Suggested fix
getRegistryBaseColor()warn when the color returns 404instead of failing silently.
registry.
colors/{olive,mauve,taupe,mist}.jsonfiles to theshadcn-vue registry (the palette already exists in the upstream React
registry).