Skip to content

Bug: the olive base color in shadcn-vue init does not generate the CSS variables #1910

Description

@aaronhernan

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

  1. Vue + Vite project with Tailwind v4.
  2. pnpm dlx shadcn-vue@latest init
  3. Select:
    • base: reka
    • style: vega
    • icon library: lucide
    • font: inter
    • base color: olive
  4. 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.).
  5. 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).

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions