Next.js Discord

Discord Forum

whats the right way to change the width of a shadcn ui component

Unanswered
American Kestrel posted this in #help-forum
Open in Discord
American KestrelOP
whats the right way to change the width of a shadcn ui component?
I am using Shadcn's Dialog and it fills my whole screen width, when I want it to be just 650px for a 2xl and xl screens, and then 300px for md and sm screens, but it doesnt work when I just add to it under className, what am I doing wrong

64 Replies

American KestrelOP
@American Sable @European sprat Any idea
Blanc de Hotot
since it's already defined in tailwind component, you have to either put an exclamation before the class, so !xl:w-[650px] etc

or you can go directly to components/ui/dialog and update the classes there
American KestrelOP
Hi!
i dont want to change it for all the dialogs
i just want to change it for this particular one
where do i write this? in the code where i use the dialog component?
Blanc de Hotot
sorry its xl:!w-[650px]

yeah adding an exclamation overrides it with !important
American KestrelOP
I have the entire dialog components in a div
oh ok!
sorry to bother you with another que
if i want to make my site responsive
whats the best way to do so
do i write what sizes sm md xl 2xl should be for each component
xl:!w-[650px]
Blanc de Hotot
yeah basically or using flex-wrap to make things responsive
@American Kestrel `xl:!w-[650px] `
American KestrelOP
so this in className right?
Blanc de Hotot
yup
now, in this case, if i want this dialog to size itself and all the components within it
i.e make it responsive
you suggest just adding flex-wrap on the parent div
im a noob in all this, hope you understand
@American Kestrel so this in className right?
American KestrelOP
bummer
this didnt work, its still as width as the whole screen
i dont understand why
American Crocodile
Shadcn ui use tailwind merge, just write different width on <DialogContent> Component
American KestrelOP
American Crocodile
For exemple :
<DialogContent className="w-[1250px] max-w-[1500px]">
American KestrelOP
lemme givethat a shot
one moment
whats rem
American Crocodile
1rem = 16px
Its a different unit
American KestrelOP
so it'll override what width is originally intended for the dialog
@American Crocodile For exemple : `<DialogContent className="w-[1250px] max-w-[1500px]">`
American Crocodile
I've put in random width, so think about putting in values that correspond to you, and don't forget to adapt it for the mobile format with the breakpoints.
American KestrelOP
how do i know whats the max i can put into say an md
American Crocodile
American KestrelOP
ugh, it finally worked
thank you so much!
@American Kestrel how do i know whats the max i can put into say an md
American Crocodile
I don't know if this answers your question, for md, don't exceed 768px in length.
@American Crocodile Click to see attachment
American KestrelOP
these are fixed right?
just want to understand further
American Crocodile
You can use width values in %, for example, and a fixed maximum width .
American KestrelOP
it didnt work when i put only w-[650px]
it still filled 100% width
but when i added max-w-[700px] it worked
wwhy is that
@American Crocodile You can use width values in %, for example, and a fixed maximum width .
American KestrelOP
oh, that's even better
@American Kestrel it didnt work when i put only w-[650px]
American Crocodile
Need also, redefine max width
and min-width
American KestrelOP
can i do min-width and max-width in percentages too
isnt it best to use percentages always then
American Crocodile
Yes, if you wish
American KestrelOP
any downsides to that
i wouldnt have to worry about responsiveness then right
or would i
American Crocodile
The best thing to do is to take inspiration from Shadcn ui, here is the source code : <DialogContent>
"fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg md:w-full",
American KestrelOP
thank you!
@American Kestrel <@83679718401904640> <@135324139648057344> Any idea
European sprat
Don't randomly ping people
American KestrelOP
noted.
pinged you as you had helped me with a FE question before!
not randomly
wont repeat, thank you:)
American Sable
Wait why was I tagged lol