Components appearance inconsistent with documentation after installing shadcn/ui

[wu-pan]

Hi,

I've created a default Next.js project and installed shadcn/ui components using the command npx shadcn@latest init -d. Specifically, I installed alert-dialog, dialog, drawer, and sheet components. To my surprise, these components do not appear as documented.

I have verified this behavior across different browsers, but the issue persists.

Here are the steps I followed:

• Created a new Next.js app.
• Ran npx shadcn@latest init -d.
• Installed the following components: alert-dialog, dialog, drawer, sheet.

Could someone please advise on why the components might not be displaying correctly? Any guidance would be greatly appreciated.

Sheet

Please forgive my poor CSS skills 😅

[wu-pan]

Interestingly, when I created a React project using Vite, this issue disappeared.

[wu-pan]

After creating the nextjs project I removed all of next's default CSS styles to fix the problem