Next.js Discord

Discord Forum

Why does this happen

Unanswered
Hokkaido posted this in #help-forum
Open in Discord
HokkaidoOP
For some reason while using Shadcn-ui the components are being rendered without any styles
Why is that ?

4 Replies

are they included in your tailwind config? and are you importing your tailwind config?
HokkaidoOP
In shadcn I copied the layout.tsx file directly and there was no globals.css
well you need to have the styles file for tailwind...
Silver Marten
If you used create-next-app and used tailwind
all you have to do is open the terminal and run npx shadcn-ui@latest init

and if you wanna add components use
npx shadcn-ui@latest add button or any other element like npx shadcn-ui@latest add dialog

in top of your page.tsx or wherever you wanna display your components use:
import { Button } from "@/components/ui/button" or similar. You can see on each shadcn component page how to use that component.

Here's the guide for installing shadcn ui library: https://ui.shadcn.com/docs/installation/next