variant prop ignored when passed to custom component

Input

const MyComponent = ({ children, ...props }) =>
  <div {...props}>{children}</div>

const CompWithStyleProp = () =>
  <MyComponent color="red">Works: comp with style prop</MyComponent>

const DivWithVariant = () =>
  <div variant="heading.h3">Works: div with variant</div>

const CompWithVariant = () =>
  <MyComponent variant="heading.h3">Doesn't work: comp with variant</MyComponent>

// render
export default () => (
  <div>
    <CompWithStyleProp/>
    <DivWithVariant/>
    <CompWithVariant/>
  </div>
)

Output

Expected output

I expect the third line (CompWithVariant) to be rendered with the heading.h3 variant.

Passing style props to a custom component works as expected. Passing a variant prop to a regular DOM tag (div) works as expected. Passing a variant prop to a custom component does not cause the style to be applied to the rendered output.

[shadcn]

I’ve been able to reproduce this. Looking into it.

Thanks for filing this bug.

[ftes]

Neat, thanks! I will try this out in the next days.