Next.js Discord

Discord Forum

Shadcn UI Component library modification help

Answered
Tonkinese posted this in #help-forum
Open in Discord
Avatar
TonkineseOP
Hey everyone, I'm trying to modify one of shadcn's ui component drowdown in my navbar. eveytime the user clicks it increases the height of the navbar
https://cdn.discordapp.com/attachments/766433464055496744/1151201460965626098/image.png
const CommandList = React.forwardRef<
  React.ElementRef<typeof CommandPrimitive.List>,
  React.ComponentPropsWithoutRef<typeof CommandPrimitive.List>
>(({ className, ...props }, ref) => (
  <CommandPrimitive.List
    ref={ref}
    className={cn("max-h-[300px] overflow-y-auto overflow-x-hidden z-50", className)}
    {...props}
  />
))

I tried adding that z-50 or adding position absolute it broke the component
Answered by fuma 💙 joulev
By default, it doesn’t include a Portal or something to turn it into a popover. (The command list is a part of component)

The command component is based on cmdk: https://cmdk.paco.me
You can check their examples, normally you can wrap the list into a popover as they recommended in their GitHub ReadMe.
View full answer

7 Replies

Avatar
TonkineseOP
link to the component if someones is intered in looking at the problem 🙂
https://ui.shadcn.com/docs/components/command
Avatar
By default, it doesn’t include a Portal or something to turn it into a popover. (The command list is a part of component)

The command component is based on cmdk: https://cmdk.paco.me
You can check their examples, normally you can wrap the list into a popover as they recommended in their GitHub ReadMe.
Answer
Avatar
TonkineseOP
ohhhh ok
so do i wrap the whole component ?
sorry im a but confused since i never really use ui components
Avatar
Install Radix UI Popover (or a headless UI library you prefer), and put your whole component into popover content
Avatar
TonkineseOP
alright