Trying to connect Storybook with Shadcn Component Library and needing some help

[paper glacier]

Hi there, I have been tasked to connect Shadcn Component library to Storybook and needing technical support.
Shadcn is a component library similar to ChakraUI.
So far, I have taken steps to import a component from Shadcn and follow the Storybook documentation but I can't seem to get my Shadcn button component to render in Storybook. I have provided an image of my Storybook implementation and also the code for the Shadcn button component.

Could you please write back to provide some guidance?

Thanks in advance.

[paper glacier]

This is what story book is showing

[pallid skiff]

What happens if you add children: 'Default' to the args of your Primary story?

[paper glacier]

Hi Kyle, I spent all last night trying to figure out the problem and it seems the cause is the coordination between Storybook and tailwind. Storybook is not detecting the tailwind css file.

My questions moving forward:

1. Does Storybook need an output tailwind css file because currently my project is not creating one.
2. I am using Remix JS. When setting up Storybook in the CLI, Storybook could not detet the type of bundler I was using, it gave me an option between Webpack 5 and Vite (I chose Vite). Is there any compatibility issues here for choosing Vite as a bundler?
3. In the video tutorial https://www.youtube.com/watch?v=zlmpn88LxNM the guy uses yarn to do some installations, can I use npm?

[pallid skiff]

We have a dedicated guide for using Tailwind in Storybook, which is a bit more up-to-date than that video: https://storybook.js.org/recipes/tailwindcss/

For your other questions:

There should be no issue using Vite in Storybook and Remix in your app. The main thing is that you may run into issues getting Remix code (e.g. anything to do with the router) to run in Storybook. If you check #1048740936953376859, someone recently shared a Remix Storybook starter that's probably worth looking into.

You can absolutely use npm (or pnpm) instead of yarn.

[echo mica]

@paper glacier i just setup shadcn , this works for me. make sure you import the css file with the css variables

import type { Preview } from '@storybook/react'
import { withThemeByClassName } from '@storybook/addon-styling'
import '../src/styles/globals.css'

const preview: Preview = {
    parameters: {
        actions: { argTypesRegex: '^on[A-Z].*' },
        controls: {
            matchers: {
                color: /(background|color)$/i,
                date: /Date$/,
            },
        },
    },

    decorators: [
        // Adds theme switching support.
        // NOTE: requires setting "darkMode" to "class" in your tailwind config
        withThemeByClassName({
            themes: {
                light: 'light',
                dark: 'dark',
            },
            defaultTheme: 'light',
        }),
    ],
}

export default preview

although i ran into this issue i am wondering how to solve 🙂 https://discord.com/channels/486522875931656193/1138514342426456195