TTC
Theo's Typesafe Cult•9mo ago
Circus

Shadcn components don't work out of the box?

Perhaps a noob question, but I noticed that following the Date Picker component (Date Range Picker in example) is far from what shows up visually in the docs. Copy-pasted without changing any defaults, instructions followed exactly. Does anyone have any idea? Asking here since shadcn is somewhat popular here and T3 is used across the entire project Open issue on github (not me): https://github.com/shadcn-ui/ui/issues/1574
GitHub
The calendar looks completely wrong. · Issue #1574 · shadcn-ui/ui
The calendar component is just not formatted or styled correctly. This project uses other shadcn components and they all work fine, but the calendar just looks and behaves incorrectly. The days are...
No description
No description
No description
No description
7 Replies
Daryl
Daryl•9mo ago
Hi @Circus! Can you also share your code for the Calendar component?
Circus
Circus•9mo ago
@Daryl Of course, here it is (no changes have been made to it, directly from shadcn)
No description
Daryl
Daryl•9mo ago
I'm not sure what the issue might be, but the same code for the Calendar and the Date Picker works properly for the website (shadcn): * https://github.com/shadcn-ui/ui/blob/main/apps/www/registry/default/example/date-picker-with-range.tsx * https://github.com/shadcn-ui/ui/blob/main/apps/www/registry/default/ui/calendar.tsx Can you verify if the Tailwind classes are being applied correctly? Is your config setup properly? If everything should be fine, can you share a reproduction we can test on our end?
GitHub
ui/apps/www/registry/default/example/date-picker-with-range.tsx at ...
Beautifully designed components built with Radix UI and Tailwind CSS. - shadcn-ui/ui
GitHub
ui/apps/www/registry/default/ui/calendar.tsx at main · shadcn-ui/ui
Beautifully designed components built with Radix UI and Tailwind CSS. - shadcn-ui/ui
Rhys
Rhys•9mo ago
@Circus are you importing the tailwind stylesheet?
Rhys
Rhys•9mo ago
https://ui.shadcn.com/docs/installation/manual from globals.css
Manual Installation
Add dependencies to your project manually.
Circus
Circus•9mo ago
@Rhys as reece Yes, Tailwind works across the app @Daryl It is set to 'src/styles/globals.css' since that's the default place for T3 Also, I tried to make a new project sandbox with the latest T3 and shad so I can show you, and they don't work together? What is going on?
No description
Circus
Circus•9mo ago
The styles just aren't getting passed down for some reason. Can you understand why?
No description
Want results from more Discord servers?
Add your server
More Posts
Redirect to Dashboard, or let user navigate themselves?Hey, just a general UI/UX question, I have a recipes app with a home page and a dashboard (and more Missing Secret on UTApiEverytime I try to call a function that comes from the UTApi in my server it returns an error ❌ tRPC./run.sh setenv: invalid argumentHi guys I was building an real time chat server with redis and upstash and I got this weird error. IDelete Uploadthing filesHi guys, I am sorry if this is a stupid question but can i delete images uploaded to Uploadthing dirProper 3rd party APIs config in Next.jsHey everyone, I tried to move a set of serverless functions to a standalone Fastify server for someUnderstanding Next-Auth role in my app.Hi everyone, I'm working on my first project with the T3 stack, and apart from TypeScript , Next.js,issues #1580I understand what it says, but unable to find any dockerfile to update so kinda I have not yet underWhat are these Typescript completion suggestions inside Prisma?When I `CNTRL + SPACE` inside a date.set in Prisma, I get these strange autocompletes, like `getUTCDDeploying t3-stack with dockerI am trying to deploy t3 stack app with docker using the Dockerfile config provided in the docs. Theeslint fails in default t3 projectI just created a fresh t3 app and ran `pnpm lint` and I get a number of linting errors. How can I f