Skip to content

[bug]: shadCn + base ui "asChild" prop bug #10465

@NandanNagane

Description

@NandanNagane

Describe the bug

When we pass the "asChild" prop to shadCn components it is not resolved in that case of baseUi primitives it is handled with Radix/ui primitives but not in Radix/ui primitives :
example: <Button asChild size="lg" className="rounded-lg text-base"> <a href="/dashboard">Back to home page</a> </Button>
Here:
function Button({ className, variant = "default", size = "default", ...props }) { return ( <ButtonPrimitive data-slot="button" className={cn(buttonVariants({ variant, size, className }))} {...props} /> ); }

"asChild" Prop is not handled

Affected component/components

Button

How to reproduce

1.Setup shadCn with base ui primitives
2. Import button from CLI.
3. Try to render a HTML primitive within that comp using "asChild" prop

Codesandbox/StackBlitz link

No response

Logs

React does not recognize the `asChild` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `aschild` instead. If you accidentally passed it from a parent component, remove it from the DOM element.

System Info

Browsers

Before submitting

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't working

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions