Feature description
The Card/Item/Field (and potentially more) components generally render non-semantic HTML. Occasionally, we want to be able to render semantic HTML for them. For example:
- Card may be rendered as
<article />
- CardTitle may be rendered as
<h2 />
Additionally, we may need it to act as a link or a Motion (Framer) element. Ocassionally, some native elements that are in currently being used such as <p /> have limitations (e.g., cannot contain another <p />). I'm sure there are many other use cases where a render prop/asChild prop will be useful.
Affected component/components
Card, Item, Field (and more)
Additional Context
Here is an example implementation that I have used in my projects:
function Card({
className,
size = 'default',
render,
...props
}: Readonly<useRender.ComponentProps<'div'> & { size?: 'default' | 'sm' }>) {
return useRender({
defaultTagName: 'div',
props: mergeProps<'div'>(
{
className: cn(
'group/card flex flex-col gap-6 overflow-hidden rounded-xl border border-border bg-card p-6 text-sm text-card-foreground shadow-xs has-[>img:first-child]:pt-0 data-[size=sm]:gap-4 data-[size=sm]:p-4 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl',
className
),
},
props
),
render,
state: {
slot: 'card',
size,
},
});
}Before submitting
Feature description
The Card/Item/Field (and potentially more) components generally render non-semantic HTML. Occasionally, we want to be able to render semantic HTML for them. For example:
<article /><h2 />Additionally, we may need it to act as a link or a Motion (Framer) element. Ocassionally, some native elements that are in currently being used such as
<p />have limitations (e.g., cannot contain another<p />). I'm sure there are many other use cases where a render prop/asChild prop will be useful.Affected component/components
Card, Item, Field (and more)
Additional Context
Here is an example implementation that I have used in my projects:
Before submitting