Styles are wrong when selecting 'no' for CSS color variables option

[davesierra]

It seems like the styles for certain components are not applied when selecting No for CSS color variables.

Reproduction:

Initialize shadcn: pnpm dlx shadcn-ui@latest init

Here are my selections:

√ Would you like to use TypeScript (recommended)?  [yes]
√ Which style would you like to use? » Default
√ Which color would you like to use as base color? » Slate
√ Where is your global CSS file? ... src/styles/globals.css
√ Would you like to use CSS variables for colors? [no] 
√ Where is your tailwind.config.js located?  tailwind.config.ts
√ Configure the import alias for components: @/components
√ Configure the import alias for utils:  @/lib/utils
√ Are you using React Server Components? yes
√ Write configuration to components.json. Proceed?  yes

I've only seen it broken with slider so far, not sure the rest.

Specifically, the track part of the slider is not showing. Upon inspection, the color is applied via class 'bg-primary/secondary', both use variables as the color: background-color: hsl(var(--secondary)); which uses CSS variables, so my main suspicion was to go back and initialize with the CSS variables this time:

Would you like to use CSS variables for colors? ... [yes]

And this time it shows up!

Suggestions

At the least, I think adding a warning about selecting 'no', and/or providing more documentation about this so that when these steps are taken, the user doesn't assume that the library is not functional. Alternatively, if possible, provide some default colors, based on the 'Which style would you like to use?" or "base color" options.

[shadcn]

Hmmm I can't reproduce this. Can you share the code generated for the slider please?

Here's what mine looks like:

<SliderPrimitive.Track className="relative h-2 w-full grow overflow-hidden rounded-full bg-slate-100 dark:bg-slate-800">
    <SliderPrimitive.Range className="absolute h-full bg-slate-900 dark:bg-slate-50" />
</SliderPrimitive.Track>
<SliderPrimitive.Thumb className="block h-5 w-5 rounded-full border-2 border-slate-900 bg-white ring-offset-white transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-slate-950 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 dark:border-slate-50 dark:bg-slate-950 dark:ring-offset-slate-950 dark:focus-visible:ring-slate-300" />```

[davesierra]

Hello @shadcn thanks for getting back!

So I got around to reproducing this in code sandbox, within a Docker container:

https://codesandbox.io/p/sandbox/autumn-wildflower-n9qddq

All I did was (apart from starting with the node:18 docker image):

1. Install Nextjs with npx create-next-app@latest

I did the default options, so:

What is your project named? my-app Would you like to use TypeScript? Yes Would you like to use ESLint? Yes Would you like to use Tailwind CSS? Yes Would you like to use src/ directory? No Would you like to use App Router? (recommended) Yes Would you like to customize the default import alias (@/)? Yes What import alias would you like configured? @/

2. Followed shadcn/ui's step to initialize, as stated above, only this time I did NOT use pnpm (to rule that out) and just did: npx shadcn-ui@latest init

3. Added the slider: npx shadcn-ui@latest add slider

4. Updated the page.tsx to include the slider component

I see the circle, but not the track.

Interestingly, as a second example, I gave the immediate parent ".slider-container" a width, and then it was rendering just fine, so I'll keep both examples in there. When I experienced the bug, I must of not had anything around it, like in that first example, and so it's not an issue with the CSS variables.

Originally, I copied the code under "Usage" at https://ui.shadcn.com/docs/components/slider and was not aware of the width requirement, so maybe it was my misunderstanding, and it requires a width on the component (as in the first example on that page), or at least on the parent? Perhaps this is more a fundamental issue with radixui and not shadcn?

[shadcn]

This issue has been automatically closed because it received no activity for a while. If you think it was closed by accident, please leave a comment. Thank you.

[GLAKSHMIPATHI]

please help me out with this npx shadcn-ui@latest init √ Which style would you like to use? » Default
√ Which color would you like to use as base color? » Stone √ Would you like to use CSS variables for colors? ... no / yes

✔ Writing components.json... ✔ Initializing project... ⠙ Installing dependencies...Command failed with exit code 1: bun add tailwindcss-animate class-variance-authority clsx tailwind-merge lucide-react 'bun' is not recognized as an internal or external command, operable program or batch file.