Difficulty integrating Shadcn UI components with Observable Framework

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.

1 Like

Thank you Mike! This is super helpful! Iā€™ve upvoted it!

Iā€™ll keep digging into those issues and discussions on Github!