I am trying to use Slider Component from Shadcn UI within Observable Framework.
I found some classes like (e.g., bg-primary, bg-secondary) and CSS variables commonly functional in React ecosystems (like --tw-ring-inset) are not recognized
Basically Radix UI primitives are not rendering correctly due to missing styles and variables. How did this happen? It kinda just works in React
How did you install the Slider component? When I look at their documentation, it says to run:
npx shadcn@latest add slider
Which, when I run it, says:
We could not detect a supported framework at /Users/xxxx/xxxx.
Visit https://ui.shadcn.com/docs/installation/manual to manually configure your project.
Once configured, you can use the cli to add components.
Curious what process you followed to install it. When you follow that link, you can see that the manual install starts with instructions to install Tailwind CSS.
Hi Cobus, thank you for the quick reply! You can manually install shadcn ui components(see attached picture for slider component)
Here is the repo with full code.
Hi @tututwo, thanks for the question.
Since this question for help with Observable Framework, please start a discussion/looking for an existing discussion on GitHub rather than here. (You can also file an issue if youāve found a bug or to make a feature request.) Weāre trying to consolidate our discussions around Observableās open source on GitHub.
In particular, youāll find a related issue which you might consider upvoting:
The --tw-ring-inset that you reference is a CSS custom property (variable) defined by Tailwind, and Tailwind is a dependency of shadcn/ui (as described in the installation instructions).
Tailwind isnāt a simple library or stylesheet (unlike, say, Tachyons or Bulma). Tailwind uses CSS classes that are dynamically generated based on the class names you reference (at least the statically-analyzable ones) in code. So Tailwind needs to hook into your build process and/or development server to analyze the code and dynamically generate its stylesheet.
This means that getting Tailwind working isnāt as simple as installing it. You typically need to do a bunch of additional setup to integrate it into your application. For many of the popular existing frameworks, that work has been done by the framework developers. We havenāt yet added integration for Tailwind to Observable Framework, but weāre considering it and prioritizing based on interest, so please upvote the issue above. Weād also welcome help if youāre familiar with Tailwind and have suggestions on how we could integrate it.
Thank you Mike! This is super helpful! Iāve upvoted it!
Iāll keep digging into those issues and discussions on Github!
