Shadcn UI Component library modification help

Answered

Tonkinese posted this in #help-forum

TonkineseOP

2023-09-12T17:08:45.000Z

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