I was adding Shadcn UI to my existing app, and used the automatic setup with npx shadcn-ui@latest init

This installs the dependencies for me, and creates the setup files automatically.

When I installed the Button component and the Sheet component I couldnt get them to work properly, the styles didnt apply and the Sheet didnt show on the screen when I clicked the Open button in the top right of the image.

As you see in the header image the buttons with the text "Test" and "Open" and the sun icon are not supposed to look like this.

And clicking the sun icon or the "Open" button changes the html if inspected, but doesnt show anything for the user.

The problem was that the automatic setup wanted to use aliasing for the components folder. So it created the @/components/ folder.

But you have to add these folder paths to the tailwind.config.js file aswell.

module.exports = {
  darkMode: ["class"],
  content: [
    './pages/**/*.{ts,tsx}',
    './components/**/*.{ts,tsx}',
    './@/components/**/*.{ts,tsx}',
    './app/**/*.{ts,tsx}',
    './src/**/*.{ts,tsx}',
    ],

So the fix is in the line 6: './@/components/**/*.{ts,tsx}',

And now the styles work and the menus show like they are supposed to.