[bug]: No more asChild in dropdown-menu and sidebar when using baseui

[bmichotte]

Describe the bug

When using baseui as the library for components, the asChild functionnality of (at least) SidebarMenuButton, DropdownMenuTrigger and DropdownMenuTrigger does not exist anymore while the documentation on the website still show them : https://ui.shadcn.com/docs/components/sidebar#link-or-anchor https://ui.shadcn.com/docs/components/dropdown-menu#dialog

Affected component/components

Sidebar, Dropdown-menu

How to reproduce

I added a little reproduction on bmichotte/shadcn-no-as-child in app/page.tsx

Codesandbox/StackBlitz link

No response

Logs

System Info

shadcn 3.6.0
baseui 1.0.0

Before submitting

• [x] I've made research efforts and searched the documentation
• [x] I've searched for existing issues

[aelfannir]

Doc page uses Radix, base-ui uses useRender hook.

[henningsieh]

Hey @bmichotte, I was playing around and got this working.

SideBar

• use render prop instead of asChild
• add className="group" to the CollapsibleTrigger child component
• change group-data-[state=open]/collapsible to group-data-panel-open

<SidebarGroupLabel
  className="group/label text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground text-sm"
  render={
    <CollapsibleTrigger className="group">
      {item.title}
      <HugeiconsIcon
        icon={ArrowRight01Icon}
        className="ml-auto h-4 w-4 transition-transform stroke-[2px] group-data-panel-open:rotate-90"
      />
    </CollapsibleTrigger>
  }
/>

DropdownMenu

• use render prop instead of asChild
• use data-popup-open instead of data-[state=open]

DropdownMenuContent

• use className="w-(--anchor-width)" instead of className="w-(--radix-dropdown-menu-trigger-width)"

<DropdownMenu>
  <DropdownMenuTrigger
    render={
      <SidebarMenuButton
        size="lg"
        className="data-popup-open:bg-sidebar-accent data-popup-open:text-sidebar-accent-foreground"
      >
        <div className="bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg">
          <HugeiconsIcon icon={FolderLibraryIcon} className="size-4" />
        </div>
        <div className="flex flex-col gap-0.5 leading-none">
          <span className="font-medium">Documentation</span>
          <span className="">v{selectedVersion}</span>
        </div>
        <HugeiconsIcon
          icon={ArrowUp01Icon}
          className="ml-auto size-4"
        />
      </SidebarMenuButton>
    }
  />
  <DropdownMenuContent className="w-(--anchor-width)" align="start">
    {versions.map((version) => (
      <DropdownMenuItem
        key={version}
        onSelect={() => setSelectedVersion(version)}
      >
        v{version}{" "}
        {version === selectedVersion && (
          <HugeiconsIcon icon={Tick02Icon} className="ml-auto" />
        )}
      </DropdownMenuItem>
    ))}
  </DropdownMenuContent>
</DropdownMenu>

See also Migrating from Radix UI

[mathwcst-bitlyft]

Not exactly the same problem, but I had to do something in the sidebar.tsx component: pass render to the Tooltip function. I wanted to override the render prop in the sidebar, so instead of a button, I use Tanstack Router's <Link /> component.

[andredewaard]

So this was a lie?

We rebuilt every component for Base UI, keeping the same abstraction. They are fully compatible with your existing components, even those pulled from remote registries.

I use asChild on buttons a lot for links that i want to style as a button. this means for every asChild i uses like

          <Button variant="ghost" size="default" asChild>
            <Link to="/email/new">
              <PencilIcon />
              Compose
            </Link>
          </Button>

I need to rewrite these to

<Button variant="ghost" size="default" render={<Link to="/email/new">
    <PencilIcon />
    Compose
  </Link>} />

[bmichotte]

I use asChild on buttons a lot for links that i want to style as a button. this means for every asChild i uses like

      <Button variant="ghost" size="default" asChild>
        <Link to="/email/new">
          <PencilIcon />
          Compose
        </Link>
      </Button>

I need to rewrite these to

<Button variant="ghost" size="default" render={<Link to="/email/new"> <PencilIcon /> Compose

} />

You can use

<Link className={buttonVariants({ variant: 'ghost' })}>
     <PencilIcon />
     Compose
 </Link>