support of asChild prop when generating patterns | Voters

support of asChild prop when generating patterns

omarkhatibco

The good thing about generating the patterns is you get a React component directly.
The problem though, it's not SEO friendly, sometime you need your Container to be a section or a main tag but it's not possible. 
by supporting asChild we can do so without using the pattern function

November 28, 2023

Alexandre Stahmer

you can extend built-in patterns JSX element > https://panda-css.com/docs/customization/patterns#:~:text=jsxElement%20%2D%20The%20actual%20JSX%20element%20that%20will%20be%20rendered%20(when%20jsxFramework%20is%20set).%20Defaults%20to%20div.
you can also use the as
 prop, even tho it's not typed, it works fine in runtime
---
regarding the asChild
 prop, it's currently not supported mostly because Panda supports many JSX frameworks, asChild is not possible everywhere afaik, this would create inconsistencies for the same APIs
you can use ark-ui
 factory for that and you can mix it with the styled
 factory like styled(ark.div)

Ramin Rezaei

Alexandre Stahmer can you please provide an example of how to add those functionalities in extend built-in patterns

Júlio Mühlbauer

Exactly, it is great to see a <Grid /> component for example. But for SEO isn't great a "div". The as prop from Chakra was great for only SEO. I think a asHtmlTag (accepting only string) it would be nice.